How can I set the visibility of a polygon using Google's version 3 API?

Question

I've found the way to set the visibility of a marker using the following:

            // create the marker 
            blueMarker = new google.maps.Marker({
                position: new google.maps.LatLng(33.514428, -112.29056534285377),
                draggable: true,
                raiseOnDrag: false,
                icon: './Images/blue3Marker.png',
                shapeType: 'BuyersEdgeArea',
                shapeID: '3'
            });

            // set the marker on the map
            blueMarker.setMap(map);

Then I use blueMarker.setVisible(false) or blueMarker.setVisible(true) to make it visible/not visible.

But how to I do the same for a polygon?

Here's how I've set up my polygon:

        BuyersEdge3 = new google.maps.Polygon({
            clickable: true,
            paths: BuyersEdgePath3,
            strokeColor: '#000000',
            strokeOpacity: 1,
            strokeWeight: 2,
            fillColor: ' #810541 ',
            fillOpacity: 0.35
        });

        // set the shape on the map
        BuyersEdge3.setMap(map);

Now how would I make this shape not visible ?

My situation is that I have a checkbox where the user checks to either see or not see a polygon. The first time it's checked, I'll create the polygon but subsequent times, I just want to make the polygon shape visible or not.

I'm converting an Virtual Earth app where I could just "show" or "Hide" a layer with the polygon on it but I can't find something to do the trick for the Google API version 3 using JavaScript.

Answer 1

you can do it if you set strokeOpacity and fillOpacity to zero and reset the polygon to the map.

here is a little hack for the Polygon prototype (meaning you will have access to it in all Polygon objects) that will do that thing for you

// this is a visibility flag. don't change it manually
google.maps.Polygon.prototype._visible = true;

// this will save opacity values and set them to 0, and rebound the polygon to the map
google.maps.Polygon.prototype.hide = function(){
    if (this._visible) {
        this._visible = false;
        this._strokeOpacity = this.strokeOpacity;
        this._fillOpacity = this.fillOpacity;
        this.strokeOpacity = 0;
        this.fillOpacity = 0;
        this.setMap(this.map);
    }
}

// this will restore opacity values. and rebound the polygon to the map
google.maps.Polygon.prototype.show = function() {
    if (!this._visible) {
        this._visible = true;
        this.strokeOpacity = this._strokeOpacity;
        this.fillOpacity = this._fillOpacity;
        this.setMap(this.map);
    }
}

now you can do BuyersEdge3.hide() and BuyersEdge3.show()

enjoy!

Answer 2

You can use:

BuyersEdge3.setOptions({visible:false});

Answer 3

    if (BuyersEdge3.map)
    {
        BuyersEdge3.setMap(null);
    } else {
        BuyersEdge3.setMap(map);
    }

Answer 4

According to documentation GMAP POLYGON GMAP Polygon has setVisible() function, so you can use it.

myPolygon.setVisible(false); // to hide
myPolygon.setVisible(true); // to show