Google Maps Draw — draw line or polygon by dragging

Question

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.

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

Demo: http://jsfiddle.net/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.com/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>