[SOLVED] Continue drawing a polyline in google maps v3

Continue drawing a polyline in google maps v3

Is it possible to turn on drawing mode for an existing polyline with a google's DrawingManager?

It's possible in Google Maps web app when going to custom map editor (My Maps in menu -> Create map -> Draw). Then create a polyline, right-click on the last point and select extend line (see picture below).

But I can't find a way to do the same with google maps api v3.

Solution

set the editable-option of the polyline to true and add points to the polyline-path

Example:

click on the line makes the line editable
click on the map stops editing
rightclick on the vertex while extending the line stops editing

function initMap() {
  var goo   = google.maps,
      map   = new goo.Map(document.getElementById('map'), {}),
      line  = new goo.Polyline({
                path: [
                        {lat: 37.772, lng: -122.214},
                        {lat: 21.291, lng: -157.821},
                        {lat: -18.142, lng: 178.431},
                        {lat: -27.467, lng: 153.027}
                      ]}),
      bounds  = new goo.LatLngBounds();
      
      
      line.getPath().getArray().forEach(function(ll){
         bounds.extend(ll);
      });
      map.fitBounds(bounds);
  

      line.setMap(map);
  
  
  /**
    *  click on the line makes the line editable
    *  
    *  click on the map stops editing
    *  
    *  rightclick on the vertex while extending the line stops editing
    *                      
    **/      
  goo.event.addListener(line,'click',function(e){
    
    var line=this;
    
    //make the line editable
    this.setEditable(true);
    
    //stopediting on map-click
    goo.event.addListenerOnce(this.getMap(),'click',function(){
      line.setEditable(false);
    });
    //when a vertex has been clicked
    if(typeof e.vertex==='number'){
      
      //when the first or last vertex has been clicked
      if(!e.vertex ||e.vertex===this.getPath().getLength()-1){
        
        
        //when the first vertex has been clicked reverse the path to
        //be able do push a vertex
        if(e.vertex===0){
          var p=this.getPath().getArray();
          p.reverse();
          this.setPath(p);
        }
        
        //push a vertex 
        this.getPath().push(e.latLng)
        
        //observe the mousemove of the map to set the latLng of the last vertex
        var move=goo.event.addListener(this.getMap(),'mousemove',function(e){
           line.getPath().setAt(line.getPath().getLength()-1,e.latLng) 
        });
        
        //stop editing on rightclick
        goo.event.addListenerOnce(this,'rightclick',function(){
          goo.event.removeListener(move);
          this.setEditable(false);
        });
       } 
    }
  });
}

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3&callback=initMap"></script>
<div id="map"></div>