asciimo · October 1, 2017 06:29
diff --git a/mapdemo.html b/mapdemo.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
 	position: relative;
 	top: 200px;
        height: 400px;
      }
      #controls {
 	position: relative;
 	top: 180px;
      }
    </style>
  </head>
  <body>
    <div id="controls">
      <input type="checkbox" id="checkGroupOne" checked="checked">Group One</button>
      <input type="checkbox" id="checkGroupTwo" checked="checked">Group Two</button>
      <input type="checkbox" id="checkGroupThree" checked="checked">Group Three</button>
    </div>
    <div id="map"></div>
    <script>
      var map;

      var markerGroupOne = [];
      var markerGroupTwo = [];
      var markerGroupThree = [];

      var markerGroupState = {
        markerGroupOne: true,
        markerGroupTwo: true,
        markerGroupThree: true
      }

      // Google Maps
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 37.7, lng: -122.43229},
          zoom: 10
        });

        // Generate markers
        for (var j in layerOneData) {
          markerGroupOne.push(createMarker(layerOneData[j]));
        }
        for (var k in layerTwoData) {
          markerGroupTwo.push(createMarker(layerTwoData[k]));
        }
        for (var l in layerThreeData) {
          markerGroupThree.push(createMarker(layerThreeData[l]));
        }
      }

      function createMarker(data) {
        var marker = new google.maps.Marker({
          position: { lat: data.lat, lng: data.lng },
          label: data.organization,
          map: map,
        });
 	return marker;
      };

      // Our layer controls
      var buttons = [ "checkGroupOne", "checkGroupTwo", "checkGroupThree" ];
      for (var i in buttons) {
        document.getElementById(buttons[i]).addEventListener('change', function(event) {
          switch(event.target.id) {
            case "checkGroupOne":
              toggleMarkerGroup("markerGroupOne");
              break;
            case "checkGroupTwo" :
              toggleMarkerGroup("markerGroupTwo");
              break; 
            case "checkGroupThree" :
              toggleMarkerGroup("markerGroupThree");
              break;
          }
        })
      } 

      function toggleMarkerGroup(group) {
        markerGroupState[group] = !markerGroupState[group];
        console.log(
          "Toggling marker group " + group + " to "
          + markerGroupState[group].toString()
        );
        setMapOnGroup(markerGroupState[group] ? map : null, group);
      }

      function setMapOnGroup(map, group) {

        var groupMarkers = [];

        switch(group) {
          case("markerGroupOne"):
            groupMarkers = markerGroupOne;
            break;
          case("markerGroupTwo"):
            groupMarkers = markerGroupTwo;
            break;
          case("markerGroupThree"):
            groupMarkers = markerGroupThree;
            break;
        }

        for (var i = 0; i < groupMarkers.length; i++) {
          groupMarkers[i].setMap(map);
        }

      }

      // Map layer data. This will come from our app, backed by the Google Sheet
      var layerOneData = [
 	{ 
 		organization: 'Org One',
 		lat: 37.77031,
 		lng: -122.4292
 	},
 	{ 
 		organization: 'Org Two',
 		lat: 37.77547,
 		lng: -122.43229
 	},
 	{ 
 		organization: 'Org Three',
 		lat: 37.78035,
 		lng: -122.43417
 	}
      ];
      var layerTwoData = [
 	{ 
 		organization: 'Org Four',
 		lat: 37.6,
 		lng: -122.4
 	},
 	{ 
 		organization: 'Org Five',
 		lat: 37.7,
 		lng: -122.5
 	},
 	{ 
 		organization: 'Org Six',
 		lat: 37.75,
 		lng: -122.45
 	}
      ];
      var layerThreeData = [
 	{ 
 		organization: 'Org Seven',
 		lat: 37.55,
 		lng: -122.44
 	},
 	{ 
 		organization: 'Org Eight',
 		lat: 37.72,
 		lng: -122.52
 	},
 	{ 
 		organization: 'Org Nine',
 		lat: 37.71,
 		lng: -122.41
 	}
      ];

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY HERE]&callback=initMap"
    async defer></script>
  </body>
 <
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Map</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<style>
	/* Always set the map height explicitly to define the size of the div
	* element that contains the map. */
	#map {
	position: relative;
	top: 200px;
	height: 400px;
	}
	#controls {
	position: relative;
	top: 180px;
	}
	</style>
	</head>
	<body>
	<div id="controls">
	<input type="checkbox" id="checkGroupOne" checked="checked">Group One</button>
	<input type="checkbox" id="checkGroupTwo" checked="checked">Group Two</button>
	<input type="checkbox" id="checkGroupThree" checked="checked">Group Three</button>
	</div>
	<div id="map"></div>
	<script>
	var map;

	var markerGroupOne = [];
	var markerGroupTwo = [];
	var markerGroupThree = [];

	var markerGroupState = {
	markerGroupOne: true,
	markerGroupTwo: true,
	markerGroupThree: true
	}

	// Google Maps
	function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 37.7, lng: -122.43229},
	zoom: 10
	});

	// Generate markers
	for (var j in layerOneData) {
	markerGroupOne.push(createMarker(layerOneData[j]));
	}
	for (var k in layerTwoData) {
	markerGroupTwo.push(createMarker(layerTwoData[k]));
	}
	for (var l in layerThreeData) {
	markerGroupThree.push(createMarker(layerThreeData[l]));
	}
	}

	function createMarker(data) {
	var marker = new google.maps.Marker({
	position: { lat: data.lat, lng: data.lng },
	label: data.organization,
	map: map,
	});
	return marker;
	};

	// Our layer controls
	var buttons = [ "checkGroupOne", "checkGroupTwo", "checkGroupThree" ];
	for (var i in buttons) {
	document.getElementById(buttons[i]).addEventListener('change', function(event) {
	switch(event.target.id) {
	case "checkGroupOne":
	toggleMarkerGroup("markerGroupOne");
	break;
	case "checkGroupTwo" :
	toggleMarkerGroup("markerGroupTwo");
	break;
	case "checkGroupThree" :
	toggleMarkerGroup("markerGroupThree");
	break;
	}
	})
	}

	function toggleMarkerGroup(group) {
	markerGroupState[group] = !markerGroupState[group];
	console.log(
	"Toggling marker group " + group + " to "
	+ markerGroupState[group].toString()
	);
	setMapOnGroup(markerGroupState[group] ? map : null, group);
	}

	function setMapOnGroup(map, group) {

	var groupMarkers = [];

	switch(group) {
	case("markerGroupOne"):
	groupMarkers = markerGroupOne;
	break;
	case("markerGroupTwo"):
	groupMarkers = markerGroupTwo;
	break;
	case("markerGroupThree"):
	groupMarkers = markerGroupThree;
	break;
	}

	for (var i = 0; i < groupMarkers.length; i++) {
	groupMarkers[i].setMap(map);
	}

	}

	// Map layer data. This will come from our app, backed by the Google Sheet
	var layerOneData = [
	{
	organization: 'Org One',
	lat: 37.77031,
	lng: -122.4292
	},
	{
	organization: 'Org Two',
	lat: 37.77547,
	lng: -122.43229
	},
	{
	organization: 'Org Three',
	lat: 37.78035,
	lng: -122.43417
	}
	];
	var layerTwoData = [
	{
	organization: 'Org Four',
	lat: 37.6,
	lng: -122.4
	},
	{
	organization: 'Org Five',
	lat: 37.7,
	lng: -122.5
	},
	{
	organization: 'Org Six',
	lat: 37.75,
	lng: -122.45
	}
	];
	var layerThreeData = [
	{
	organization: 'Org Seven',
	lat: 37.55,
	lng: -122.44
	},
	{
	organization: 'Org Eight',
	lat: 37.72,
	lng: -122.52
	},
	{
	organization: 'Org Nine',
	lat: 37.71,
	lng: -122.41
	}
	];

	</script>
	<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR API KEY HERE]&callback=initMap"
	async defer></script>
	</body>
	<