bnorberg/Roots API Workshop Bike Crash Google Map Example

## Roots API Workshop Bike Crash Google Map Example
<!DOCTYPE html>
<html>
  <head>
    <style>
      html,
      body {
        font-family: Arial, sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        // Constructor creates a new map - only center and zoom are required.
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 36.0014258, lng: -78.9404173},
          zoom: 17,
          styles: [
            {
              "elementType": "labels",
              "stylers": [
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "featureType": "administrative.neighborhood",
              "stylers": [
                {
                  "visibility": "on"
                }
              ]
            },
            {
              "featureType": "road",
              "stylers": [
                {
                  "visibility": "on"
                }
              ]
            }
         ]
        });
        var telecom = {lat: 36.0034784, lng: -78.9388665};
        var marker = new google.maps.Marker({
          position: telecom,
          map: map,
          title: 'Here we are!'
        });
        map.data.loadGeoJson('durham_bcrashes.geojson');
        map.data.setStyle(function(feature){
          return /** @type {google.maps.Data.StyleOptions} */({
            icon: {
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: 2,
                    strokeColor: 'red',
                    labelOrigin: new google.maps.Point(-2, 4)
                  },
            title: feature.getProperty('CrashGrp'),
            label:  {
                      text: feature.getProperty('CrashDate'),
                      color: 'black',
                      fontSize: '10px'
                    }
           });
        });
      }
    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=[Add-your-api-key]&v=3&callback=initMap">
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	html,
	body {
	font-family: Arial, sans-serif;
	height: 100%;
	margin: 0;
	padding: 0;
	}
	#map {
	height: 100%;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>
	var map;
	function initMap() {
	// Constructor creates a new map - only center and zoom are required.
	map = new google.maps.Map(document.getElementById('map'), {
	center: {lat: 36.0014258, lng: -78.9404173},
	zoom: 17,
	styles: [
	{
	"elementType": "labels",
	"stylers": [
	{
	"visibility": "on"
	}
	]
	},
	{
	"featureType": "administrative.neighborhood",
	"stylers": [
	{
	"visibility": "on"
	}
	]
	},
	{
	"featureType": "road",
	"stylers": [
	{
	"visibility": "on"
	}
	]
	}
	]
	});
	var telecom = {lat: 36.0034784, lng: -78.9388665};
	var marker = new google.maps.Marker({
	position: telecom,
	map: map,
	title: 'Here we are!'
	});
	map.data.loadGeoJson('durham_bcrashes.geojson');
	map.data.setStyle(function(feature){
	return /** @type {google.maps.Data.StyleOptions} */({
	icon: {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 2,
	strokeColor: 'red',
	labelOrigin: new google.maps.Point(-2, 4)
	},
	title: feature.getProperty('CrashGrp'),
	label: {
	text: feature.getProperty('CrashDate'),
	color: 'black',
	fontSize: '10px'
	}
	});
	});
	}
	</script>

	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=[Add-your-api-key]&v=3&callback=initMap">
	</script>

	</body>
	</html>