Getting coordinates of marker in Google Maps API
JavascriptGoogle MapsJavascript Problem Overview
I'm using Google Maps API. And I'm using the code below to get the coordinates of the marker.
var lat = homeMarker.getPosition().$a;
var lng = homeMarker.getPosition().ab;
Everything is working fine with the app that I built using Google Maps. But I tested it today and I got problems getting the correct coordinates. Only to discover that the code above is getting undefined. After I console.log(homeMarker.getPosition()) I discovered that this is now the variables that they used for the coordinates.
var lat = homeMarker.getPosition().ab;
var lng = homeMarker.getPosition().cb;
I won't ask why Google Maps acts this way but you can also include it in your answer. My question is that how do I properly get the coordinates without changing my code everytime google maps changes the variables that they're using.
Javascript Solutions
Solution 1 - Javascript
var lat = homeMarker.getPosition().lat();
var lng = homeMarker.getPosition().lng();
See the google.maps.LatLng docs and google.maps.Marker getPosition().
Solution 2 - Javascript
One more alternative options
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 1,
center: new google.maps.LatLng(35.137879, -82.836914),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(47.651968, 9.478485),
draggable: true
});
google.maps.event.addListener(myMarker, 'dragend', function (evt) {
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';
});
google.maps.event.addListener(myMarker, 'dragstart', function (evt) {
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
and html file
<body>
<section>
<div id='map_canvas'></div>
<div id="current">Nothing yet...</div>
</section>
</body>
Solution 3 - Javascript
Also, you can display current position by "drag" listener and write it to visible or hidden field. You may also need to store zoom. Here's copy&paste from working tool:
function map_init() {
var lt=48.451778;
var lg=31.646305;
var myLatlng = new google.maps.LatLng(lt,lg);
var mapOptions = {
center: new google.maps.LatLng(lt,lg),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker = new google.maps.Marker({
position:myLatlng,
map:map,
draggable:true
});
google.maps.event.addListener(
marker,
'drag',
function() {
document.getElementById('lat1').innerHTML = marker.position.lat().toFixed(6);
document.getElementById('lng1').innerHTML = marker.position.lng().toFixed(6);
document.getElementById('zoom').innerHTML = mapObject.getZoom();
// Dynamically show it somewhere if needed
$(".x").text(marker.position.lat().toFixed(6));
$(".y").text(marker.position.lng().toFixed(6));
$(".z").text(map.getZoom());
}
);
}