3

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.

Skitterm
  • 4,257
  • 7
  • 38
  • 54
  • 1
    possible duplicate of [free form drawing on a google maps](http://stackoverflow.com/questions/19444677/free-form-drawing-on-a-google-maps) – geocodezip Oct 24 '13 at 03:29

1 Answers1

15

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>
geocodezip
  • 158,664
  • 13
  • 220
  • 245
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • @"Dr.Molle", any reason why you not EVER deliver a real solution? Is there some kind of philosophy behind that? I would have given a concrete, IRL example in this case, not a recipe. – davidkonrad Oct 23 '13 at 17:29
  • I don't think his solution is bad. It allows me to think things through. One problem, though, is that in the drawing library, there is the note: "Note that google.maps.Map events, such as click and mousemove are disabled while drawing on the map." Do I just use browser event listeners? I'd need to use Google Maps' listeners to get the coordinates, right? – Skitterm Oct 23 '13 at 17:36
  • Yes, you need the Maps-Listeners. You don't need the drawing-library to achieve it. – Dr.Molle Oct 23 '13 at 17:38
  • 3
    @davidkonrad: what's the matter with you? What's not real with this solution? SO is neither a code-delivery-service, nor a platform to leave unqualified comments. It's a programming-community. – Dr.Molle Oct 23 '13 at 18:02
  • 1
    @Dr.Molle, in this case, you are lucky to answer an OP that actually is able to comprehend. SO is not about only helping those with already enormous programming skills. SO is about helping people, and you have to help people at their own level, so they can be better - and perhaps go a level up. SO is not to help people by copy-pasting manuals or generics, even if those with most rep have their rep from cite manuals. But I love your answers, sometimes I just think you could do it better than refer to a link, fusiontable or similar. I am here to help people to be a better programmer – davidkonrad Oct 23 '13 at 18:46
  • @davidkonrad: now I see what's your problem, you're sorrowful because of [**this answer by you**](http://stackoverflow.com/questions/19424185/find-zipcodes-inside-polygon-shape-using-google-maps-api/19536205#19536205). Maybe Your answer was more detailed than mine, but it wasn't a good answer. You've suggested to use 5 steps with extensive calculations, while I suggested to use a single query on a database. Obviously my answer was sufficient for the OP, when you need a more detailed explanation feel free to leave a comment to my answers and request further details. – Dr.Molle Oct 23 '13 at 19:08
  • @Skitterm: sorry for this conversation – Dr.Molle Oct 23 '13 at 20:04
  • @Dr.Molle: Thanks for your help. What exactly is different about addListenerOnce than addListener? I can't find documentation on it. But it solved the problem I was working on. – Skitterm Oct 24 '13 at 18:32
  • It's similar to e.g. jQuery's `$.one()` and `$.on()` . `addListenerOnce` will execute the callback only 1 time while `addListener` executes the callback each time the event has been triggered....until you remove the listener. It's documented here: https://developers.google.com/maps/documentation/javascript/reference?hl=en&csw=1#event – Dr.Molle Oct 24 '13 at 18:57
  • @Dr.Molle +1 Awesome. simply superb. – Praveen Jan 09 '14 at 10:38