Does polyline support points so they will be displayed like this:
I am try
You can use points and an array to save the points and then you can create a custom marker along the polyline.
To put markers on the vertices of the polyline, do this:
polyline = new google.maps.Polyline( {
path : coordinates,
strokeColor : "#FF0000",
strokeOpacity : 1.0,
strokeWeight : 4
} );
for ( var i = 0; i < polyline.getPath().getLength(); i++ ) {
var marker = new google.maps.Marker( {
icon : {
// use whatever icon you want for the "dots"
url : "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size : new google.maps.Size( 7, 7 ),
anchor : new google.maps.Point( 4, 4 )
},
title : polyline.getPath().getAt( i ),
position : polyline.getPath().getAt( i ),
map : map
} );
}
map.setCenter( new google.maps.LatLng(
response[ centerIndex ].Lat,
response[ centerIndex ].Long ) );
polyline.setMap( map );
working example (based off Google's simple polyline example from the documentation)
working code snippet:
// This example creates a 2-pixel-wide red polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia. Adds blue "measle" markers to each vertex.
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var polyline = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
for (var i = 0; i < polyline.getPath().getLength(); i++) {
var marker = new google.maps.Marker({
icon: {
// use whatever icon you want for the "dots"
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(4, 4)
},
position: polyline.getPath().getAt(i),
title: polyline.getPath().getAt(i).toUrlValue(6),
map: map
});
}
polyline.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>