Letting User Draw On a Google Map?

Question

Does anyone know if it's possible to allow a user to draw a line from Point A to point B on a Google map?

If so, how is this usually done?

Answer 1

You can use the Polylines and specify two points or more using gooogle.maps.LatLng. Here is a JSFiddle Demo:

  //create points on the Polylines
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];

  //create the Polyline and feed it points with stroke styling
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  //set the polylines on the map
  flightPath.setMap(map);

To be much more detail as others suggests, the coodinates can be either entered by user either by a click event to place markers as points on the map and then supply the markers coodinates as points for the polylines or you can also create a form where the users can manually enter their address or their lat lng as points to draw the points, but the detail way of drawing the polylines is similar to the above example except Lat Lng are statically coded on the demo.

Answer 2

Look at the documentation on polylines. You just need to add an 'click' event on the map and handle the drawing of the lines.