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!

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!

• javascript
• methods
• marker
• mapbox

2 Answers 2

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.

You can also do this:

console.log(marker._lngLat.lat);
console.log(marker._lngLat.lng);