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 🙂