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.

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.

• javascript
• google-maps
• google-maps-api-3

• 1 possible duplicate of free form drawing on a google maps – geocodezip Commented Oct 24, 2013 at 3:29

1 Answer 1

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 remendable to draw only with a pressed right mousebutton, otherwise the map would never be draggable.

Demo: http://jsfiddle/doktormolle/YsQdh/

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'),
    mapOptions);
  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
    });
    //move-listener
    var move = google.maps.event.addListener(map, 'mousemove', function(e) {
      poly.getPath().push(e.latLng);
    });
    //mouseup-listener
    google.maps.event.addListenerOnce(map, 'mouseup', function(e) {
      google.maps.event.removeListener(move);
      if (document.getElementById('overlay').value == 'Polygon') {
        var path = poly.getPath();
        poly.setMap(null);
        poly = new google.maps.Polygon({
          map: map,
          path: path
        });
      }
    });

  });
}

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

html,
body {
  height: 100%;
  margin: 0
}
#map_canvas {
  height: 90%;
}

<script src="https://maps.googleapis./maps/api/js"></script>
Use the right mouse-button to draw an overlay
<br/>
<select id="overlay">
  <option value="Polyline">Polyline</option>
  <option value="Polygon">Polygon</option>
</select>
<div id="map_canvas"></div>