Geek Answers Handbook

Get latitude latitude map from mouse position

I am trying to convert a mouse position on a google map to a LatLng object. I see quite a lot of messages about getting a position using the google map "click" event, etc., For example:

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

But this does not work for my purposes, because I do not respond to the map event, I respond to the 'tapHold' event. Inside the tapHold event, I would like to get the latitude and longitude of the current mouse position. In fact, I could see that such a function is useful in many ways besides just the tapHold event.

I can think of some hacks, for example, creating a mouseover event on the fly, and then resolving it only once and removing it after receiving the LatLng object from the rollover event, but it seems to be hacky to me ... Looking for a more elegant solution. Thanks!

+10
javascript google-maps geolocation
source share
4 answers
 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/

+16
source share

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

From map object

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

From the overlay object:

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

You can do this with dummy overlay:

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

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

+14
source share

If you do not need a very accurate value, you can calculate it yourself based on the borders of the map (offset below 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>
+3
source share

Try using the solution indicated in:

Using longclick / taphold with Google Maps in jQuery Mobile?

0
source share

More articles:


All Articles