Styling a Google Maps v3 Polyline with Dashes or Dots?

Question

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?

Answer 1

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 :)