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, l
Solution 1:
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);
}
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>
<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>
Post a Comment for "Get Map Latitude Longitude From Mouse Position"