I have a test page at http://www.choptankelectric.coop/outages/google/visibility_test.html where I want to show a polygon on loading the page but remove it when the visitor reaches zoom level > 13.
I have commented out my attempts at the top of the 'view source' and also the 'visible' parameter at the bottom.
BTW, if I insert a DOCTYPE the map doesn't display.
TIA for any help with this.
Your page doesn't display without a DOCTYPE because your map doesn't have a size, should be:
<div id="map" style="width: 480px; height: 480px;"></div>
Adding a listener to the map for "zoom_changed":
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() > 13) poly.setMap(null);
else poly.setMap(map);
});
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 11,
center: new google.maps.LatLng(38.4, -75.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var poly = new google.maps.Polygon({
path: AreaBoundary1,
strokeWeight: 1,
fillColor: '#55FF55',
fillOpacity: 0.3
});
poly.setMap(map);
google.maps.event.addListener(map, "zoom_changed", function() {
if (map.getZoom() > 13) poly.setMap(null);
else poly.setMap(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
var AreaBoundary1 = [
new google.maps.LatLng(38.359476783305, -75.214501841143),
new google.maps.LatLng(38.362345692658, -75.213715263721),
new google.maps.LatLng(38.367366296974, -75.239013654585),
new google.maps.LatLng(38.375427394827, -75.235459756599),
new google.maps.LatLng(38.375228242261, -75.234478037591),
new google.maps.LatLng(38.375273400367, -75.233228514797),
new google.maps.LatLng(38.375616016941, -75.231891574705),
new google.maps.LatLng(38.375936006851, -75.231339272304),
new google.maps.LatLng(38.376233242401, -75.230990324745),
new google.maps.LatLng(38.377330945634, -75.230379285494),
new google.maps.LatLng(38.378245589651, -75.229739397276),
new google.maps.LatLng(38.378680054926, -75.229245049172),
new google.maps.LatLng(38.378862912696, -75.228896215845),
new google.maps.LatLng(38.379090992824, -75.227501206487),
new google.maps.LatLng(38.379295743902, -75.225205297693),
new google.maps.LatLng(38.379592567387, -75.2240716986),
new google.maps.LatLng(38.380117961665, -75.222676379481),
new google.maps.LatLng(38.380552176823, -75.221804307849),
new google.maps.LatLng(38.38105497306, -75.221048245618),
new google.maps.LatLng(38.381649384079, -75.220350334809),
new google.maps.LatLng(38.382175305985, -75.219943020852),
new google.maps.LatLng(38.382792411234, -75.218983464046),
new google.maps.LatLng(38.382906436343, -75.218373032062),
new google.maps.LatLng(38.382837460919, -75.217850047386),
new google.maps.LatLng(38.382882532651, -75.216513198939),
new google.maps.LatLng(38.383133614228, -75.215553914681),
new google.maps.LatLng(38.383773251117, -75.214187485867),
new google.maps.LatLng(38.384184746827, -75.213722033425),
new google.maps.LatLng(38.384476969132, -75.213511853601),
new google.maps.LatLng(38.382637564283, -75.204264820299),
new google.maps.LatLng(38.38519197244, -75.198823547699),
new google.maps.LatLng(38.405577811602, -75.19034453901),
new google.maps.LatLng(38.407028585378, -75.182599075765),
new google.maps.LatLng(38.40722096122, -75.174076115614),
new google.maps.LatLng(38.408363397248, -75.170436134806),
new google.maps.LatLng(38.409309204558, -75.165281800201),
new google.maps.LatLng(38.408901468414, -75.160340258055),
new google.maps.LatLng(38.406765903601, -75.152595654452),
new google.maps.LatLng(38.395190936758, -75.125505819646),
new google.maps.LatLng(38.385642833873, -75.117728390668),
new google.maps.LatLng(38.374856118103, -75.119631104135),
new google.maps.LatLng(38.36627877377, -75.123365898101),
new google.maps.LatLng(38.356385213645, -75.135886367449),
new google.maps.LatLng(38.355748521369, -75.138697584933),
new google.maps.LatLng(38.356588228882, -75.140827882168),
new google.maps.LatLng(38.353966142431, -75.148677720414),
new google.maps.LatLng(38.353399989815, -75.155934132108),
new google.maps.LatLng(38.355773036555, -75.163013288465),
new google.maps.LatLng(38.3570997232, -75.167760532105),
new google.maps.LatLng(38.357490472371, -75.169648322129),
new google.maps.LatLng(38.357697649263, -75.170984310809),
new google.maps.LatLng(38.356877865946, -75.175023673389),
new google.maps.LatLng(38.356928288534, -75.180281795915),
new google.maps.LatLng(38.357135648358, -75.181937363443),
new google.maps.LatLng(38.357479565684, -75.182924590933),
new google.maps.LatLng(38.358006656962, -75.184027796508),
new google.maps.LatLng(38.35789315148, -75.185131944698),
new google.maps.LatLng(38.357326389225, -75.187567228589),
new google.maps.LatLng(38.34928043721, -75.188915754557),
new google.maps.LatLng(38.345843986823, -75.189137004871),
new google.maps.LatLng(38.345367132702, -75.190008596877),
new google.maps.LatLng(38.346404068602, -75.190624211995),
new google.maps.LatLng(38.348624653027, -75.191329323286),
new google.maps.LatLng(38.35058254734, -75.192057763342),
new google.maps.LatLng(38.353025828197, -75.193483945018),
new google.maps.LatLng(38.353438729258, -75.192835933727),
new google.maps.LatLng(38.355365219959, -75.192351477338),
new google.maps.LatLng(38.356135794137, -75.193697811043),
new google.maps.LatLng(38.3563850507, -75.1941453725),
new google.maps.LatLng(38.359110738339, -75.194142149659),
new google.maps.LatLng(38.360686848599, -75.194015706074),
new google.maps.LatLng(38.36087720196, -75.197844264232),
new google.maps.LatLng(38.364907004794, -75.197548472384),
new google.maps.LatLng(38.36634361825, -75.200520734765),
new google.maps.LatLng(38.368920516308, -75.205852864658),
new google.maps.LatLng(38.368558991925, -75.20777168909),
new google.maps.LatLng(38.359476783305, -75.214501841143)
];html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}<script src="https://maps.google.com/maps/api/js"></script>
<div id="map"></div>