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.

Bothnia

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!

Allantoid

OH !!!! I see! Thank you. So if I may add on to this question, I want to make my show() hide() generic by passing in a 'value' of which BuyersEdge shape I want to hide. so I tried this; function hidePolygon(value) { var be = 'BuyersEdge' + value; be.hide(); <----- does not work BuyersEdge3.hide(); <----- works } – Bothnia

var be = 'BuyersEdge' + value; will make be = 'BuyersEdge3' .. and 'BuyersEdge3' is a string. and string doesn't have .hide method... – Allantoid

@Allantoid I modified your solution to use only this.setMap, but I didn't want to post it as an answer. Essentially all you need to do is set the map to null on hide, and back to the original value on show. – Falchion

Answer 2

You can use:

BuyersEdge3.setOptions({visible:false});

Nae

Answer 3

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

Wintertide

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

Eparch

Answer 5

This is My idea, works on My site.

    function drawPolygon(p){
if(window.poly)window.poly.setMap(null);
  var pp=[];
  for(var i=0;i<p.length;i+=2)
  {
    pp.push(new google.maps.LatLng(parseFloat(p[i+1]),parseFloat(p[i])));
  }

    window.poly=new google.maps.Polygon({
      paths: pp,
      strokeColor: "#FF0000",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#FF0000",
      fillOpacity: 0.1
    });

    window.poly.setMap(map);
    google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.getZoom()>14) {window.poly.setMap(null);}
else {window.poly.setMap(map);}
  });
  }  

Statistics

Answer 6

it's working:

this.visible = !this.visible;
  if (this.visible) {
    this.polygon.setOptions({ fillOpacity: 1, strokeOpacity: 1 }); // Mostrar el polígono
  } else {
    this.polygon.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); // Ocultar el polígono
  }

Frolick

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Dither