Skip to content Skip to sidebar Skip to footer
Home / Geolocation / Google Maps / Javascript

Get Map Latitude Longitude From Mouse Position

Post a Comment
I am trying to convert the position of the mouse on a google map into a LatLng object. I see quite a few posts on getting the position from with the google map 'click' event etc, l

Solution 1: 

google.maps.event.addListener(map, 'mousemove', function (event) {
              displayCoordinates(event.latLng);               
          });

functiondisplayCoordinates(pnt) {

          var lat = pnt.lat();
          lat = lat.toFixed(4);
          var lng = pnt.lng();
          lng = lng.toFixed(4);
          console.log("Latitude: " + lat + "  Longitude: " + lng);
      }

Source: http://seydahatipoglu.wordpress.com/2012/10/21/how-to-display-cursor-coordinates-in-google-map-javascript/

Solution 2:

There are several function for working with pixels, to use them you need to access the projection first.

From the map object

map.getProjection().fromPointToLatLng(new google.maps.Point(x, y))

From an overlay object:

overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(x, y));

You can do this with a dummy overlay as well:

var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);

Here is an reference to the documentation: https://developers.google.com/maps/documentation/javascript/reference#Projection

Solution 3:

If you do not need a very accurate value, you can calculate it yourself based on the bounds of map (bias under 1%):

<!DOCTYPE html><html><head><scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script>var map;

            functioninitialize() {
                var mapOptions = {
                    zoom: 12,
                    center: new google.maps.LatLng(33.397, -81.644),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map_canvas'),
                    mapOptions
                );
                google.maps.event.addListener(map, 'click', function(event) {
                    document.getElementById('latMap').value = event.latLng.lat();
                    document.getElementById('lngMap').value = event.latLng.lng();
                });
            }
            functionmapDivClicked (event) {
                var target = document.getElementById('map_canvas'),
                    posx = event.pageX - target.offsetLeft,
                    posy = event.pageY - target.offsetTop,
                    bounds = map.getBounds(),
                    neLatlng = bounds.getNorthEast(),
                    swLatlng = bounds.getSouthWest(),
                    startLat = neLatlng.lat(),
                    endLng = neLatlng.lng(),
                    endLat = swLatlng.lat(),
                    startLng = swLatlng.lng();

                document.getElementById('posX').value = posx;
                document.getElementById('posY').value = posy;
                document.getElementById('lat').value = startLat + ((posy/350) * (endLat - startLat));
                document.getElementById('lng').value = startLng + ((posx/500) * (endLng - startLng));
            }
            google.maps.event.addDomListener(window, 'load', initialize);
        </script></head><body><divid="map_canvas"onclick="mapDivClicked(event);"style="height: 350px; width: 500px;"></div>
        x: <inputid="posX" />
        y: <inputid="posY" />
        lat: <inputid="lat" />
        lng: <inputid="lng" /><div />
        lat from map: <inputid="latMap" />
        lng from map: <inputid="lngMap" /></body></html>

Post a Comment for "Get Map Latitude Longitude From Mouse Position"