27

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?

David Pfeffer
  • 38,869
  • 30
  • 127
  • 202

1 Answers1

68

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

Marcel
  • 27,922
  • 9
  • 70
  • 85
Tina CG Hoehr
  • 6,721
  • 6
  • 44
  • 57
  • 1
    When drawing Polygon above code works. But once I complete drawing of the polygon, dashed symbols disappear. – Popara Mar 27 '14 at 15:42