I'd like to take a Google Map v3-based map with some custom polylines, and make some of those lines dotted or dashed. I can't seem to find any way of doing this. Is it possible, and if so, how?
This feature has been added to Polyline options, and it's called Symbols on Polylines
Creating a dashed line looks like this (demo):
var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};
var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});
Dash length is controlled by path
's +/-1, and spacing is controlled by repeat
. It's a bit verbose, but very flexible.
Besides dashes, the new feature includes predefined paths for a circle, arrowheads, and the docs even include an animation demo :)