Handling marker repositions

We've made our map markers draggable, so we need to handle address changes following a marker drag. This task will show just how easily that can be done. This will take just two steps:

• Binding each marker to the dragend event

• Adding the handler function for the event

Engage Thrusters

First we need to bind each marker to the dragend event when the marker is created. To do this, we should add the following highlighted line of code to the addMarker() function, directly after the marker's constructor:

var marker = new api.Marker({
    map: map,
    position: e.latLng,
    flat: (clicks === 0) ? true : false,
    animation: api.Animation.DROP,
    title: (clicks === 0) ? "Start" : "End",
    icon: (clicks === 0) ? "img/start.png" : "",
    draggable: true,
    id: (clicks === 0) ? "start" : "end"
});

api.event.addListener(marker, "dragend", markerDrag);

Next we should add the markerDrag() function itself. This can go directly after the locationAdd handler that we added...