Get All points of Poly-line Drawn on Google Maps -

Question

I am working on Google Maps.

I have a situation in which the user enters a path on the Map using Drawing tools. I need to get the entire path of all points when user stops drawing the line.

So I have this code in JavaScript:

  LoadDrawingToolsForDistance: function () {
        var drawingManager = new google.maps.drawing.DrawingManager({
            //drawingMode: google.maps.drawing.OverlayType.MARKER,
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                  google.maps.drawing.OverlayType.POLYLINE
                ]
            },
            circleOptions: {
                fillColor: '#ffff00',
                fillOpacity: 1,
                strokeWeight: 5,
                clickable: false,
                editable: true,
                zIndex: 1
            },

        });
        drawingManager.setMap(MapObject);

        google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
            debugger;
            alert('A');
        });
    }

The drawing tools is working fine. even I get alert('a') is been shown when line completed drawing.

This is the View of the event parameter in the function:

Answer 1

you can simply use overlaycomplete event to get this done.

<div id="map_canvas"></div>
  
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing">
</script>

<script type="text/javascript">

</script>

<style>
html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}
</style>
<script type="text/javascript">
  var map;
  function initialize() {
    var myOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-37.84232584933157, 145.008544921875),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

	 var drawingManager = new google.maps.drawing.DrawingManager({
		    
		    drawingControl: true,
		    drawingControlOptions: {
		      position: google.maps.ControlPosition.TOP_RIGHT,
		      drawingModes: [
                google.maps.drawing.OverlayType.POLYGON,
		        google.maps.drawing.OverlayType.POLYLINE
		      ]
		    },
	    polygonOptions: {
	    	strokeColor: '#75ad3e',
	        fillColor: '#75ad3e',
	        fillOpacity: 0.35,
	        strokeWeight: 2,
	        clickable: true,
	        editable: true,
	        draggable:true
	      }
	});
    	drawingManager.setMap(map);
    	
    	google.maps.event.addListener(drawingManager, 'overlaycomplete', function (OverlayCompleteEvent) {
    		var bounds = OverlayCompleteEvent.overlay.getPath().getArray();
    		console.log(bounds);
          alert(bounds.toString());

    		 });

    	}


  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 2

To retrieve the points of the polyline on the map you can use this

google.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
   console.log(event.getPath().getArray());
});

This will print out all the points in the polyline.