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

google maps polygon
google maps editable polygon
google maps polygon area
google maps polygon fill pattern
draw polygon on google map with coordinates
google maps polyline
google maps circle marker
google maps polyline with markers

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.

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!

Showing/Hiding Overlays | Maps JavaScript API, 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  We are going to use a Polygon, since they are commonly used for this kind of thing: 1. Build your Polygon - in Google Earth, build yourself a Polygon and set up the style how you like it.

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

Hide/show polygon, Always set the map height explicitly to define the size of the div * element that This example adds hide() and show() methods to a custom overlay's prototype. I want to display multiple polygons (with the co ordinates either given by the user or pre-defined) on Google Maps and to toggle the visibility of each polygon. I wrote the code to display multiple

You can use:

BuyersEdge3.setOptions({visible:false});

How do I make paths visible only at certain zoom levels?, With the button 'Toggle Visibility' I want to hide/show the polygon 'poly'. I've seen What do I need to put in the onClick=""? I can't figure it out. Tooltip over a Polygon in Google Maps. I have polygons for various region and states in my application. Markers implement tooltip by taking the title attribute. On mouseover and mouseout over a polygon events can be fired. How do I create a tooltip that looks like the tooltip that is implemented for a marker.

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

Setting visible scale range and layering issues, Is there a way to control the visibility of paths at certain zoom levels? So, my first thought is to create a polygon (how else does one create a BOX?) around a white jpeg to load as image overlay set at 50% opacity, placing where I wanted it,  I've drawed 2 polygons on my map; - poly - poly1. With the button 'Toggle Visibility' I want to hide/show the polygon 'poly'. I've seen the examples, but they're all for API V2. I need something for V3. I've tried some things with hide() but I'm not good with JS so I can't make it on my own without some help What do I have to do to hide/show

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

Feature Visibility - KMLtouring, Second question: I have polygon and polyline layers with selectable attributes. If the polygon is visible, I can only seem to select its attributes,  You can use this property to associate an arbitrary Object with this polygon. For example, the Object can contain data about what the polygon represents. This is easier than storing a separate Map<Polygon, Object>. As another example, you can associate a String ID corresponding to the ID from a data set. Google Maps SDK for Android neither reads nor writes this property.

Display multiple polygons on Google Maps and toggle visibility of , We are going to use a Polygon, since they are commonly used for this kind of thing: 1. Build your Polygon - in Google Earth, build yourself a Polygon and set up  I am trying to do a Google Maps search for places inside an arbitrary region loaded into a Data object loaded via GeoJSON file, which means I need to then convert the feature in the Data object, but I was not able to use standard methods like getFeatureById() in the way I see other code examples use it. I was able to generate my polygon using

Visibility problems for orthogonal objects in two-or three-dimensions , If you want to use checkboxes to toggle polygons, you can set a user-defined properties when you creating a new polygon. For example: Create a polygon using the passed PolygonOptions, which specify the polygon's path, the stroke style for the polygon's edges, and the fill style for the polygon's interior regions. A polygon may contain one or more paths, where each path consists of an array of LatLngs.

Space/query-time tradeoff for computing the visibility polygon , LetP be a set ofl points in 3-space, and letF be a set ofm opaque rectangular faces Avis D, Toussaint GT (1981) An optimal algorithm for determining the visibility of a polygon from an edge. IEEE Trans Comput C30:910–914. Google Scholar. In computational geometry, the visibility polygon or visibility region for a point p in the plane among obstacles is the possibly unbounded polygonal region of all points of the plane visible from p. The visibility polygon can also be defined for visibility from a segment, or a polygon.

Comments
  • 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 }
  • var be = 'BuyersEdge' + value; will make be = 'BuyersEdge3' .. and 'BuyersEdge3' is a string. and string doesn't have .hide method...
  • @marxus 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.