Draggable Pin Marker for Google Maps API V3

Google’s Maps API offer a vast range of functionality to interact with underlying maps. As opposed to statically setting markers (pins) programmatically sometimes you might want your users to be able to interact with the map by dragging existing markers around the map.

Google Maps API V3

Fortunately, Google’s JavaScript API offers this functionality out of the box. Below you’ll find an example based on Google Maps API V3. Basically, what we want to achieve is to be automatically notified when a user changes a marker’s position. Clearly, this can be done by registering a listener on the marker which will fire an event once the marker has been dropped on the destination coordinates. After all, we want to be given these coordinates in order to carry out further actions. But first of all we need to create a new map instance and bind it to a DOM container element, as explained in the official reference documentation:

var latLng = new google.maps.LatLng(lat,lng);

var options = {
  zoom: 13,
  center: latLng,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  locale: LANG
}

var map = new google.maps.Map(document.getElementById(canvasDomId), options);

Once we have the map instance we are able to add markers, as shown in the following code snippet:

var marker = new google.maps.Marker({
  position: latLng, 
  map: map, 
  title: title,
  draggable: true
});

In order for the marker to be draggable across the map we need to set the attribute draggable to true. Finally, in order to be notified of changes of the marker’s position we need to add an event listener to the marker:

google.maps.event.addListener(marker, 'drag', function(event) {
  console.debug('new position is '+event.latLng.lat()+' / '+event.latLng.lng()); 
});

google.maps.event.addListener(marker, 'dragend', function(event) {
  console.debug('final position is '+event.latLng.lat()+' / '+event.latLng.lng()); 
});

Whereas the event drag is fired whenever the user drags the marker and slides it across the map, the dragend is triggered only when the marker is dropped.

Working example


<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script>

var iconBase = 'http://base-url-to-your-icon';

function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(TODO_LAT, TODO_LNG),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(TODO_LAT, TODO_LNG),
map: map,
icon: iconBase + 'TODO_img.png'
});

var features = [{
position: new google.maps.LatLng(TODO_LAT, TODO_LNG),
type: 'info'
}];

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

google.maps.event.addListener(marker, 'drag', function(event) {
console.debug('new position is '+event.latLng.lat()+' / '+event.latLng.lng());
});

google.maps.event.addListener(marker, 'dragend', function(event) {
console.debug('final position is '+event.latLng.lat()+' / '+event.latLng.lng());
});
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>

<div id="map_canvas" style="width: 500px;height: 400px;"></div>

You may also like...

2 Responses

  1. J Rodriguez says:

    Sorry, can you show an complete example?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.