CODEWITHSUNDEEP
javascriptgoogle-maps-api-3colorstransparentpolyline
Zeussi
Zeussi

Reputation: 581

google.maps.Polyline - how to get a transparent / invisible polyline?

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...

Upvotes: 4

Views: 7462

Answers (1)

geocodezip
geocodezip

Reputation: 161384

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

Upvotes: 4

Related Questions