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());
});
}
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 += " " + polylines[i].getPath().getAt(j).toUrlValue(6) + "<br>";
}
}
document.getElementById('output').innerHTML = htmlStr;
});
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 += " " + 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>