1

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>

3 Answers 3

3

You are declaring toggleLayers function inside the initMap function. That's why you are getting this error. Just declare the function outside the initMap function.

2

To be used as an HTML click function, the routine needs to be in the global scope. Currently it is local to your initMap function.

You will also need the layers array in the global scope.

proof of concept fiddle

screenshot of map

code snippet:

var map = null;
var layers = [];

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

  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);
  }
}
/* 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;
}
<div id="floating-panel">
  <input type="checkbox" value="Toggle NOAA Buoy Layer" onclick="toggleLayers(0);" />NOAA Buoys TURN ON
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

You can leave it inside the initMap function if you apply it to the HTML elements using the google.maps.event.addDomListener function.:

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

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

  google.maps.event.addDomListener(document.getElementById('toggleBuoyLayer'), 'click', function() {
    toggleLayers(0);
  })
}

proof of concept fiddle

code snippet:

var map = null;
var layers = [];

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

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

  google.maps.event.addDomListener(document.getElementById('toggleBuoyLayer'), 'click', function() {
    toggleLayers(0);
  })
}
/* 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;
}
<div id="floating-panel">
  <input type="checkbox" id="toggleBuoyLayer" value="Toggle NOAA Buoy Layer" />NOAA Buoys TURN ON
</div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

0
1

You should load the google maps script before your script.

Because google.maps.Map is a function constructor and you instantiate using the new keyword, it must be defined before you can use it. And you should also move your script at the bottom or use

document.addEventListener('DOMContentLoaded', (event) => {
  // your code
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.