get map latitude longitude from mouse position

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, like this:

google.maps.event.addListener(map, 'click', function(event) {
  mouseLocation = event.latLng;
});

But, this doesn't work for my purposes because I am not responding to a map event, I'm responding to a 'tapHold' event. Inside the tapHold event I'd like to get the latitude and longitude of the current mouse position. Actually I could see a function like this being useful in many ways beyond just a tapHold event.

I can think of some hacks like, to create a mouseover event on the fly, then only let it fire once and delete it after getting the LatLng object from the rollover event, but, seems sorta hackish to me... Looking for a more elegant solution. Thanks!

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

function displayCoordinates(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/

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

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>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script>
            var map;

            function initialize() {
                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();
                });
            }
            function mapDivClicked (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>
        <div id="map_canvas" onclick="mapDivClicked(event);" style="height: 350px; width: 500px;"></div>
        x: <input id="posX" />
        y: <input id="posY" />
        lat: <input id="lat" />
        lng: <input id="lng" />
        <div />
        lat from map: <input id="latMap" />
        lng from map: <input id="lngMap" />
    </body>
</html>

来源：https://stackoverflow.com/questions/13984338/get-map-latitude-longitude-from-mouse-position

标签

javascript

google-maps

geolocation