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.

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.

• javascript
• google-maps

1 Answer 1

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
});