JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<script src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<!-- Header Container -->
  <div class="top">
    <div class="header">
        <div class="headerLogo">
            <a href="http://camosun.ca"></a>
        </div>
        <div class="headerTitle">
            <a href="/maps/"></a>
        </div>

    </div>
  </div>
<!-- header div -->
  <section class="instructions">
<h1>Interurban Campus</h1>
<p>Test to create a custom Interurban campus map.</p>
<aside class="functions">
 <!-- begin - MAP LAYERS CHECKBOXES -->
<h3>Points of Interest</h3>
<form action="" method="post">
<input name="checkbox" alt="Parking checkbox"  onClick="boxclick(this,4)" type="checkbox" value="checkbox" /> Parking<br>
<input name="checkbox" alt="Parking checkbox"  onClick="boxclick(this,5)" type="checkbox" value="checkbox" /> Foodservices<br>
<input name="checkbox" alt="Parking checkbox"  onClick="boxclick(this,6)" type="checkbox" value="checkbox" /> Bookstore<br>
<input name="checkbox" alt="Emergency Phones checkbox"  onClick="boxclick(this,3)" type="checkbox" value="checkbox" /> Bike Racks<br>
<input name="checkbox" alt="Road Closure checkbox"  onClick="boxclick(this,8)" type="checkbox" value="checkbox" /> ATM<br>
<input name="checkbox" alt="Construction checkbox"  onClick="boxclick(this,7)" type="checkbox" value="checkbox" /> Coffee<br>
<input name="checkbox" alt="Bike Routes checkbox" onClick="boxclick(this,1)" type="checkbox" value="checkbox" /> Bike Routes<br>
<input name="checkbox" alt="Traffic checkbox" onClick="boxclick(this,2)" type="checkbox" value="checkbox"/> Traffic<br>
<input name="checkbox" alt="Library checkbox" onClick="boxclick(this,9)" type="checkbox" value="checkbox"/> Library<br>
</form>    
<!-- end - MAP LAYERS CHECKBOXES -->   


<!-- begin - Unordered list of locations --> 
<h3>Locations</h3>              
<div...

CSS

html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      } 
      #map {
        height: 100%;
        width: 800px;
        float: right;
       margin: 0;
        padding: 0;
        /* height: 840px; */
       width: 939px; 
      /*height: 700px;
     width: 700px;*/
       position: relative;
        overflow: hidden;
        transform: translateZ(0px);
        background-color: rgb(229, 227, 223);
    border: 1px solid #8a8c8f 
      }
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 300px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

.pac-container {
  font-family: Roboto;
}

#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}

#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
.instructions {
    height: 100%;
}
.top {
    width: 100%;    
}

JavaScript

/* *** begin - KML LAYERS *** */
// Random number generated for cache-busting
var seconds = new Date().getTime();
// Google Bike & Traffic Layers
var bikeLayer = new google.maps.BicyclingLayer();
var trafficLayer = new google.maps.TrafficLayer();
// Variables set to URLs of custom KML layers made in Google Earth  
var bikeRacksLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/bike-racks-iu.kml');   
var parkingLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/parking-iu.kml');            
var foodservicesLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/foodservices-iu.kml');  
var bookstoreLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/bookstore-iu.kml');    
var coffeeLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/coffee-iu.kml');  
var atmLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/atm-iu.kml');    
var libraryLayer = new google.maps.KmlLayer('https://webservices.camosun.bc.ca/maps-demo/_data/library-iu.kml');    
// Switch loop to toggle layers on and off  
function boxclick(box,num) { 
    switch (num)
        {
            case 1:
                if (box.checked)
                    {bikeLayer.setMap(map.getMap());} 
                else {bikeLayer.setMap(null);}
                break;
            case 2:
                if (box.checked)
                    {trafficLayer.setMap(map);} 
                else {trafficLayer.setMap(null);} 
                break;  
            case 3:
                if (box.checked)
                    {bikeRacksLayer.setMap(map);} 
                else {bikeRacksLayer.setMap(null);}
                break; 
            case 4:
                if (box.checked)
                    {parkingLayer.setMap(map)} 
                else {parkingLayer.setMap(null);}
                break;
            case 5:
                if...