StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGoogle Maps Toggling Overlays With Checkbox
text
Body
copied!<p>I'm stuck. I can't get my checkbox functional. I would like to toggle two layers with a checkbox. The two layers should be on when loaded (check box checked) and then turned off when unchecked. Simple, I know, but I can't get it functional despite looking at lots of working examples and checking all the posts. Most of the stuff I found were how it worked with KML and fusion tables. I have something working kinda that works for a button but this doesn't work well for check boxes.</p> <p>Here is the code for the drop down box with the check boxes. </p> <pre><code>tileNEX = new google.maps.ImageMapType({ getTileUrl: function(tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity:0.50, name : 'NEXRAD', isPng: true }); goes = new google.maps.ImageMapType({ getTileUrl: function(tile, zoom) { return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-ir-4km-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime(); }, tileSize: new google.maps.Size(256, 256), opacity:0.50, name : 'GOES NA Vis', isPng: true }); //create the check box items var radarOptions = { gmap: map, title: "This allows for selection/toggling on/off Radar layer", id: "radarCheck", label: "Radar", action: function(){ if (map.overlayMapTypes.length==0) { map.overlayMapTypes.push(null); // create empty overlay entry map.overlayMapTypes.setAt("1",tileNEX); } else { map.overlayMapTypes.clear(); } } } var check1 = new checkBox(radarOptions); var radarAnimate = { gmap: map, title: "This allows for selection/toggling on/off Animated Radar", id: "radarAnimate", label: "Animate Radar", action: function(){ alert('Function is coming soon'); } } var check2 = new checkBox(radarAnimate); var satOptions = { gmap: map, title: "This allows for selection/toggling on/off Satelite layer", id: "satCheck", label: "Satellite", action: function(){ if (map.overlayMapTypes.length==0) { map.overlayMapTypes.push(null); // create empty overlay entry map.overlayMapTypes.setAt("1",goes); } else { map.overlayMapTypes.clear(); } } } var check3 = new checkBox(satOptions); //create the input box items //possibly add a separator between controls var sep = new separator(); //put them all together to create the drop down var ddDivOptions = { items: [sep, check1, check2, check3], id: "myddOptsDiv" } //alert(ddDivOptions.items[1]); var dropDownDiv = new dropDownOptionsDiv(ddDivOptions); var dropDownOptions = { gmap: map, name: 'Options', id: 'ddControl', title: 'A custom drop down select with mixed elements', position: google.maps.ControlPosition.TOP_RIGHT, dropDown: dropDownDiv } var dropDown1 = new dropDownControl(dropDownOptions); </code></pre> <p><a href="http://www.mesquiteweather.net/gmap/radar.js" rel="nofollow">FULL CODE</a></p> <p><a href="http://www.mesquiteweather.net/wxgr3radar.php" rel="nofollow">LINK TO MAP</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload