Google Map Draggable Maker

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. Fortunately, Google’s JavaScript API offers this functionality out of the box. Below you’ll find an example based on Google Maps API V3.

Practice

google_map_draggable_maker.js is a small library use to make google map draggable easily:

google_map_draggable_maker.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// -------------------------------------------------------------------
// @author Bunlong <bunlong.van@gmail>
// Created :  6 Jun 2014 by Bunlong
// -------------------------------------------------------------------

// options = {elementh, lat, lng, zoom, coordsLenght, elementLat, elementLng}

MapDraggableMarker = function(options) {
  this.element = options.element;
  this.lat = options.lat;
  this.lng = options.lng;
  this.zoom = options.zoom;
  this.coordsLenght = options.coordsLenght;
  this.elementLat = options.elementLat;
  this.elementLng = options.elementLng;

  this.map = new google.maps.Map(this.element, {
    zoom: this.zoom,
    center: new google.maps.LatLng(this.lat, this.lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  this.marker = new google.maps.Marker({
    position: new google.maps.LatLng(this.lat, this.lng),
    draggable: true
  });
}

MapDraggableMarker.prototype.addListenerToMarker = function() {
  var self = this;

  google.maps.event.addListener(this.marker, 'dragend', function(evt) {
    self.elementLat.val(evt.latLng.lat().toFixed(self.coordsLenght));
    self.elementLng.val(evt.latLng.lng().toFixed(self.coordsLenght));
  });
}

MapDraggableMarker.prototype.init = function() {
  this.addListenerToMarker();
  this.map.setCenter(this.marker.position);
  this.marker.setMap(this.map);
}

index.html is the sample google map draggable:

index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="styles.css" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="google_map_draggable_maker.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      var lat = ($("#latitude").val() == "") ? 11.558831 : $("#latitude").val(),
          lng = ($("#longitude").val() == "") ? 104.917445 : $("#longitude").val(),
          zoom = 15,
          coordslenght = 6;

          mapDraggableMarker = new MapDraggableMarker({ element: $("#canvas")[0],
                                                        lat: lat,
                                                        lng: lng,
                                                        zoom: zoom,
                                                        coordsLenght: coordslenght,
                                                        elementLat: $("#latitude"),
                                                        elementLng: $("#longitude")
                                                      });

      mapDraggableMarker.init();
    });
  </script>
</head>
<body>
  <div id="canvas" style="width: 635px; height: 300px;"></div><br />
  <label for="latitude">Latitude:</label>
  <input id="latitude" type="text" value="" />
  <label for="longitude">Longitude:</label>
  <input id="longitude" type="text" value="" />
</body>
</html>

You can download the source code and try it out.