Get lattitude and longitude onmouseover and onclick event in google map
As you move the mouse over the google map you can see the lattitude and longitude displayed below the google map.
When you click on google map the lattitude and longitude of the mouse position is displayed in the text box below the google map.
This example is very simple so you can just view the source code to copy and use it. anyway i have explained below.
Lattitude:
Longitude:
Lat Lng:
Lat Lng on click:
Code and Explanation
You can also copy this code by viewing the source code of this page
if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("mapa")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl(3)); map.setCenter( new GLatLng(26.12295, -80.17122), 11,0); GEvent.addListener(map,'mousemove',function(point) { document.getElementById('latspan').innerHTML = point.lat() document.getElementById('lngspan').innerHTML = point.lng() document.getElementById('latlong').innerHTML = point.lat() + ', ' + point.lng() }); GEvent.addListener(map,'click',function(overlay,point) { document.getElementById('latlongclicked').value = point.lat() + ', ' + point.lng() }); }
- The google map api key in the head section is for my site.
- First a google map object has been created.
- Setting up map controls which will scroll and zoom the map.
- I have set the map to center itself around the given lattitude longitude with the zoom level of 11.
- And then is the event handler for onmousemove and onclick
- The event listener needs three parameters first is the map object, next is the event like onmousemove or onclick and the third parameter is the callback function to which the coordinates are passed as a parameter.
- Each time the event handlers (callback functions) are called i am updating the lattitude and longitude.
Comments, Suggestions, Objections, ...