I am trying to set up a series of checkboxes so multiple Overlays can be toggled on/off individually in a menu. I'm just trying to get one layer working before I move on to developing the rest of them. I am, unfortunately, getting an error when using Dev Tools that states Uncaught ReferenceError: toggleLayers is not defined at HTMLInputElement.onclick
I think I have the function defined but keep getting this error.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Removing Overlays</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 35.391, lng: -74.447},
mapTypeId: google.maps.MapTypeId.SATELLITE,
disableDefaultUI: true,
});
var imageBounds = {
north: 41.68,
south: 30.43,
east: -69.26,
west: -81.91
};
var map = null;
var layers = [];
layers[0] = new google.maps.GroundOverlay("https://www.saltwx.com/images/A2020022172000.L2_LAC.S3472.nc.MidAtlantic.chlor_a.png", imageBounds);
{
preserveViewport: true};
function toggleLayers(i) {
if (layers[i].getMap() == null) {
layers[i].setMap(map);
} else {
layers[i].setMap(null);
}
}
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>
</head>
<body>
<div id="floating-panel">
<input type="checkbox" value="Toggle NOAA Buoy Layer" onclick="toggleLayers(0);">NOAA Buoys</input></a>TURN ON
</div>
<div id="map"></div>
</body>
</html>