CODEWITHSUNDEEP
google-maps-api-3polygon
user1074359
user1074359

Reputation: 91

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

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.

Upvotes: 9

Views: 8670

Answers (6)

esleyder ordoñez
esleyder ordoñez

Reputation: 1

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
  }

Upvotes: 0

marxus
marxus

Reputation: 462

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!

Upvotes: 8

1nstinct
1nstinct

Reputation: 1775

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

Upvotes: 2

atx
atx

Reputation: 473

You can use:

BuyersEdge3.setOptions({visible:false});

Upvotes: 4

richdiggins
richdiggins

Reputation: 19

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

Upvotes: 1

Marcin Kostrzewa
Marcin Kostrzewa

Reputation: 595

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

Upvotes: 0

Related Questions