JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places,drawing&amp;ext=.js"></script>
<label>watersheds</label><input type="checkbox" id="watersheds" onclick="check();" onchange="check();"/><label>ere1949</label><input type="checkbox" id="ere1949" onclick="check();" onchange="check();" />
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

CSS

html, body, #map-canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

var map;
var watershedLayer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/watersheds.kmz'
});

var ere1949Layer = new google.maps.KmlLayer ({
url: 'http://mvihes.bc.ca/mapping/ere1949.kmz'
});
function initialize() {
var parksville= new google.maps.LatLng(49.316786, -124.308768);
var mapOptions = {
zoom: 9,
center: parksville
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
check();
}
function check()
{
    if(document.getElementById('watersheds').checked)
      {watershedLayer.setMap(map);}
    else
      {watershedLayer.setMap(null);}
    if(document.getElementById('ere1949').checked)
      {ere1949Layer.setMap(map);}
    else
      {ere1949Layer.setMap(null);}

}
google.maps.event.addDomListener(window, 'load', initialize);