Get all polylines from map (with drawing manager) in googlemap api javascript

Question

How can I get all polylines I created with drawing manager? I can not use DrawingManager event listener because the polyline inserted is editable (event listener in DrawingManager can only work after inserted at the first time).
And it is possible to draw more than one polylines.

Here is my code

function initMap(){

        //set center coordinate
        var myLat= /*value*/;
        var myLng= /*value*/;
        var center= {lat:myLat, lng:myLng};

        //create map
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 16,
            center: center
        });

        addDrawingControl(map);
    }

  function addDrawingControl(map){
        //add drawing control
        var drawingControl = new google.maps.drawing.DrawingManager(
        {
            drawingMode : null,
            drawingControl : true,
            drawingControlOptions :{
                position : google.maps.ControlPosition.TOP_CENTER,
                drawingModes : [
                google.maps.drawing.OverlayType.POLYLINE
                ]
            },
            polylineOptions : {
                editable:true,
                draggable:false,
                geodesic:true
            }
        });
        drawingControl.setMap(map);
        //end of add drawing control

        //add event listener
        google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline){
                var polylinePath = polyline.getPath();
                console.log("polyline : "+polylinePath.getArray());                 
        });
    }

Answer 1

Keep references to the polylines.

var polylines = []; // array in the global scope

on the polylinecomplete event, add a reference to the polyline to the array.

//add event listener
google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline) {
  polylines.push(polyline);
});

When you want to capture the data, iterate through the array retrieving the current state of the polyline.

google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
  var htmlStr = "";
  for (var i = 0; i < polylines.length; i++) {
    htmlStr += "polyline #" + i + " # vertices=" + polylines[i].getPath().getLength() + " length=" + google.maps.geometry.spherical.computeLength(polylines[i].getPath()).toFixed(2) + " km<br>";
    for (var j = 0; j < +polylines[i].getPath().getLength(); j++) {
      htmlStr += "&nbsp;&nbsp;" + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
    }
  }
  document.getElementById('output').innerHTML = htmlStr;
});

proof of concept fiddle

code snippet:

var polylines = [];

function initMap() {
  //set center coordinate
  var myLat = 42;
  var myLng = -72;
  var center = {
    lat: myLat,
    lng: myLng
  };

  //create map
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: center
  });

  addDrawingControl(map);
}

function addDrawingControl(map) {
  //add drawing control
  var drawingControl = new google.maps.drawing.DrawingManager({
    drawingMode: null,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYLINE
      ]
    },
    polylineOptions: {
      editable: true,
      draggable: false,
      geodesic: true
    }
  });
  drawingControl.setMap(map);
  //end of add drawing control

  //add event listener
  google.maps.event.addListener(drawingControl, 'polylinecomplete', function(polyline) {
    polylines.push(polyline);
    var polylinePath = polyline.getPath();
    console.log("polyline : " + polylinePath.getArray());
  });
  google.maps.event.addDomListener(document.getElementById('btn'), 'click', function() {
    var htmlStr = "";
    for (var i = 0; i < polylines.length; i++) {
      htmlStr += "polyline #" + i + " # vertices=" + polylines[i].getPath().getLength() + " length=" + google.maps.geometry.spherical.computeLength(polylines[i].getPath()).toFixed(2) + " km<br>";
      for (var j = 0; j < +polylines[i].getPath().getLength(); j++) {
        htmlStr += "&nbsp;&nbsp;" + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
      }
    }
    document.getElementById('output').innerHTML = htmlStr;
  })
}
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="btn" value="get polyline data" type="button" />
<div id="output"></div>
<div id="map"></div>