Google Maps Draw — draw line or polygon by dragging

Currently, you can draw polygons or polylines on a map by clicking, which creates a node. However, if you wanted to follow a feature such as a river or shoreline, this could be both tedious and innacurate.

Does anyone know of a way where a path could be drawn either by click-dragging the mouse, or by clicking to start, then dragging a path, then clicking to stop?

I've looked at the DrawingManager and MouseEvent, but I'm not seeing anything promising yet.

Is there a way to wire up drawing based on events such as click and mouseMove?

This would allow for much more accurate and quick features.



Possible workflow:

  1. onmousedown on the map set the draggable-option of the map to false, create a Polyline-Instance and set the clickable-option of the Polyline to false

  2. observe the mousemove-event of the map, each time it occurs push the returned LatLng to the path of the Polyline

  3. onmouseup remove the mousemove-listener for the map and set the draggable-option of the map back to true. Your Polyline has been finished

  4. When you wan't to create a Polygon, create now a Polygon-instance, set the path of the Polygon to the path of the Polyline and remove the Polyline

<edit>: It's recommendable to draw only with a pressed right mousebutton, otherwise the map would never be draggable.


code snippet: (from linked jsfiddle)

function initialize() {
  var mapOptions = {
    zoom: 14,
    center: new google.maps.LatLng(52.5498783, 13.425209099999961),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  map = new google.maps.Map(document.getElementById('map_canvas'),
  google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
    //do it with the right mouse-button only
    if (e.button != 2) return;
    //the polygon
    poly = new google.maps.Polyline({
      map: map,
      clickable: false
    var move = google.maps.event.addListener(map, 'mousemove', function(e) {
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
      if (document.getElementById('overlay').value == 'Polygon') {
        var path = poly.getPath();
        poly = new google.maps.Polygon({
          map: map,
          path: path


google.maps.event.addDomListener(window, 'load', initialize);
body {
  height: 100%;
  margin: 0
#map_canvas {
  height: 90%;
<script src=""></script>
Use the right mouse-button to draw an overlay
<select id="overlay">
  <option value="Polyline">Polyline</option>
  <option value="Polygon">Polygon</option>
<div id="map_canvas"></div>


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.