Question

I have the following code for a route where an animation goes on, so i need the polyline but i don’t want to show it:

[..]
    this.polyline = new google.maps.Polyline({
                path: [],
                strokeColor: '#ffffff',
                strokeWeight: 0
            });
[..]

The polyline is shown with that code. But i want to make the polyline transparent – not visible! How can i do it?

I set the strokeColor to “transparent” – what doesnt work, either not when i remove the option completely. I also set the strokeWeight to 0 – but these parameters have no effect. I tried also strokeOpacity from 0.0 to 1.0 – also no effect. Knows someone a solution? – PS: when i change the color to #ff0000 the color should be red, right? but it seems to be that the options doesn’t work at all – but the polyline is shown and i have no JavaScript errors in the console.log…?

Here the link to the reference with nearly the same example…

Answer 1

This works for me:

    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: '#FF0000',
      strokeOpacity: 0.00001,
      strokeWeight: 0
    });

For some unknown reason strokeOpacity: 0.0 doesn’t work.

Simple polyline example from the Google Maps API v3 documentation

same code with a transparent polyline

Similar question about transparent polylines on FusionTablesLayers