Reputation: 3069
Here's my code
var map = L.mapbox.map('map', 'examples.map-20v6611k').setView([37.9, -77],4);
var marker = L.marker(new L.LatLng(37.9, -77), {
icon: L.mapbox.marker.icon({'marker-color': 'CC0033'}),
draggable: true
});
marker.bindPopup('This marker is draggable! Move it around.');
marker.addTo(map);
//my code
marker.on('mousedown', function(e){
location = marker.getLatLng();
document.getElementById('locationBox').innerHTML = "poop";
});
The marker on the map can be dragged anywhere. I'm trying to take the longitude and latitude of the marker after the marker has been dragged somewhere which is why I'm using the marker.on('mousedown', function(e){ event handler. I have two problems. I'm trying to nest another event handler
marker.on('mouseup', function(e){
inside that so the location is grabbed once the marker is let go from being dragged but the 'mouseup' method doesn't work.
Second problem
location = marker.getLatLng();
Doesn't store lat/lon in location but rather just opens a new URL I haven't configured for.
How can I use Javascript or Jquery to grab the location of the marker after it is dragged and then dropped, and how can I appropiately store the lat/lon in a variable?
Thanks!
Upvotes: 1
Views: 5362
Reputation: 1414
You can also do this:
console.log(marker._lngLat.lat);
console.log(marker._lngLat.lng);
Upvotes: 2
Reputation: 4735
You might want to use the dragend
event as it fires after a marker has been dragged. If you peer into what e.target
returns there is a _latlng
object that gives you the details you need:
marker.on('dragend', function(e){
console.log(e.target._latlng);
});
An underscore used in a method name implies that its private so there may be a more appropriate way to access this but for now should suit your needs.
Upvotes: 6