I made a Google Maps map with a draggable marker. When the user drags the marker, I need to know the new latitude and longitude, but I don't understand what is the best approach to doing that.
How can I retrieve the new coordinates?
This question is related to
javascript
google-maps
google-maps-markers
You could just call getPosition()
on the Marker
- have you tried that?
If you're on the deprecated, v2 of the JavaScript API, you can call getLatLng()
on GMarker
.
// show the marker position //
console.log( objMarker.position.lat() );
console.log( objMarker.position.lng() );
// create a new point based into marker position //
var deltaLat = 1.002;
var deltaLng = -1.003;
var objPoint = new google.maps.LatLng(
parseFloat( objMarker.position.lat() ) + deltaLat,
parseFloat( objMarker.position.lng() ) + deltaLng
);
// now center the map using the new point //
objMap.setCenter( objPoint );
try this
var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
center: latlng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Set lat/lon values for this property',
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (event) {
document.getElementById("latbox").value = this.getPosition().lat();
document.getElementById("lngbox").value = this.getPosition().lng();
});
You should add a listener on the marker and listen for the drag or dragend event, and ask the event its position when you receive this event.
See http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#Marker for the description of events triggered by the marker. And see http://code.google.com/intl/fr/apis/maps/documentation/javascript/reference.html#MapsEventListener for methods allowing to add event listeners.
var lat = marker.getPosition().lat();
var lng = marker.getPosition().lng();
More information can be found at Google Maps API - LatLng
There are a lot of answers to this question, which never worked for me (including suggesting getPosition() which doesn't seem to be a method available for markers objects). The only method that worked for me in maps V3 is (simply) :
var lat = marker.lat();
var long = marker.lng();
var map = new google.maps.Map(document.getElementById('map_canvas'), {_x000D_
zoom: 10,_x000D_
center: new google.maps.LatLng(13.103, 80.274),_x000D_
mapTypeId: google.maps.MapTypeId.ROADMAP_x000D_
});_x000D_
_x000D_
var myMarker = new google.maps.Marker({_x000D_
position: new google.maps.LatLng(18.103, 80.274),_x000D_
draggable: true_x000D_
});_x000D_
_x000D_
google.maps.event.addListener(myMarker, 'dragend', function(evt) {_x000D_
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';_x000D_
});_x000D_
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {_x000D_
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';_x000D_
});_x000D_
map.setCenter(myMarker.position);_x000D_
myMarker.setMap(map);_x000D_
_x000D_
function getLocation() {_x000D_
if (navigator.geolocation) {_x000D_
navigator.geolocation.getCurrentPosition(showPosition);_x000D_
} else {_x000D_
x.innerHTML = "Geolocation is not supported by this browser.";_x000D_
}_x000D_
}_x000D_
_x000D_
function showPosition(position) {_x000D_
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + position.coords.latitude + ' Current Lng: ' + position.coords.longitude + '</p>';_x000D_
var myMarker = new google.maps.Marker({_x000D_
position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),_x000D_
draggable: true_x000D_
});_x000D_
google.maps.event.addListener(myMarker, 'dragend', function(evt) {_x000D_
document.getElementById('current').innerHTML = '<p>Marker dropped: Current Lat: ' + evt.latLng.lat().toFixed(3) + ' Current Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';_x000D_
});_x000D_
google.maps.event.addListener(myMarker, 'dragstart', function(evt) {_x000D_
document.getElementById('current').innerHTML = '<p>Currently dragging marker...</p>';_x000D_
});_x000D_
map.setCenter(myMarker.position);_x000D_
myMarker.setMap(map);_x000D_
}_x000D_
getLocation();
_x000D_
#map_canvas {_x000D_
width: 980px;_x000D_
height: 500px;_x000D_
}_x000D_
_x000D_
#current {_x000D_
padding-top: 25px;_x000D_
}
_x000D_
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
_x000D_
<head>_x000D_
_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<section>_x000D_
<div id='map_canvas'></div>_x000D_
<div id="current">_x000D_
<p>Marker dropped: Current Lat:18.103 Current Lng:80.274</p>_x000D_
</div>_x000D_
</section>_x000D_
_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>
_x000D_
Source: Stackoverflow.com