CODEWITHSUNDEEP
javascriptgoogle-maps
keerthi
keerthi

Reputation: 767

Google Map Theme Styling

I am using Styled Map Wizard to set up the JSON for my map's styles. But our client would like to make any bike or walk trail be dotted lines. I can’t seem to find a way to make the trails dotted lines. Is that possible?

Upvotes: 0

Views: 92

Answers (1)

KENdi
KENdi

Reputation: 7741

Yes it is:

Dashed lines

You can achieve a dashed line effect by setting the opacity of your polyline to 0, and overlaying an opaque symbol over the line at regular intervals.

Sample Code

// Define a symbol using SVG path notation, with an opacity of 1.
var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};

// Create the polyline, passing the symbol in the 'icons' property.
// Give the line an opacity of 0.
// Repeat the symbol at intervals of 20 pixels to create the dashed effect.
var line = new google.maps.Polyline({
path: [{lat: 22.291, lng: 153.027}, {lat: 18.291, lng: 153.027}],
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});

Hope this Helps

Upvotes: 1

Related Questions