I would like to add border around a polyline the same as the following picture:
Can I do it, is it possible? I have search the web for solutions for this problem and no so far.
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.
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.
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
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With