Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling Google Map API's Polylines

I am using google map api and was wondering if there was anyway of creating a dashed or dotted stroke of a polyline. Would there also be an easy way to create a curved line between two destinations rather than a straight line: the code I currently have draws a straight grey line,

polyline = new google.maps.Polyline( { path: route, strokeColor: "#7d7d7d", strokeOpacity: 0.6, strokeWeight: 5 } );
                    polyline.setMap( map );

Any advice or help would be appreciated, thanks.

like image 314
Louise McComiskey Avatar asked Oct 18 '11 10:10

Louise McComiskey


People also ask

Can you style Google Maps API?

Google Maps Platform offers Cloud-based maps styling features that make it easy to style, customize, and manage your maps using the Google Cloud Console, letting you create a customized map experience for your users without having to update your apps' code each time you make a style change.

How do I customize Google Maps API?

Use Cloud-based Maps Styling To get started with Cloud-based maps styling, copy the JSON style above, then go to the Google Cloud console. To create a new map style, paste the JSON into the 'Import JSON' option. Cloud-based maps styling is available for the Maps JavaScript API at no extra charge.

How do I customize a Google map style?

In the Google Cloud Console, go to the Map Styles page. Select the style you want, and click Customize Style.


2 Answers

What kind of curved line? You can add geodesic: true to your Polyline options, which will draw curved lines showing the shortest distance between two points (taking into account the curvature of the earth), but they only really are noticeable when zoomed out far enough and the line is between two quite far apart longitudes.

like image 97
duncan Avatar answered Sep 18 '22 23:09

duncan


Look at my free plugin for curved lines in Google maps, I'ts very basic solution but it gets the job done: http://curved_lines.overfx.net/

like image 31
Daniel Nanovski Avatar answered Sep 21 '22 23:09

Daniel Nanovski