Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add border to polyline google maps

I would like to add border around a polyline the same as the following picture: enter image description here

Can I do it, is it possible? I have search the web for solutions for this problem and no so far.

like image 626
Brk Avatar asked Nov 14 '16 14:11

Brk


People also ask

How do you outline a state on Google Maps?

Draw the outline on the map by clicking a start point, then clicking additional points to continue the outline around the area. Double-click the last point on the map to finish drawing the outline.

Can you draw a polygon on Google Maps?

Draw a path or polygon Go to a place on the map. . To make a path or polygon into a 3D object, click Altitude. A "New Path" or "New Polygon" dialog will pop up.


1 Answers

The trick would be to add two polylines, a thick black one that will do the border and a green one, less thick.

That way, because the green one is going to appear on top of the black one, but the sides of the black one are still going to be visible, it is going to act as a border.

Here's a sample of code to illustrate:

var border = new google.maps.Polyline({
    path: path,
    strokeColor: 'black', // border color
    strokeOpacity: 1.0,
    strokeWeight: 7 // You can change the border weight here
});

var line = new google.maps.Polyline({
    path: path, // /!\ same path
    strokeColor: 'green',
    strokeOpacity: 1.0,
    strokeWeight: 4
});
like image 65
nicovank Avatar answered Oct 03 '22 21:10

nicovank