JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

SCSS

html,
body,
#map {
  width: 100%;
  height: 100%;
}

JavaScript

// initiate map
function initMap() {

    // permits json
    var permits = 'permits.json';

    // map properties
    var mapProp = {
        zoom: 17,
        mapTypeId: 'satellite'
    };
    
    // google map object
    var map = new google.maps.Map(document.getElementById("map"), mapProp);
    
    // load GeoJSON.
    map.data.loadGeoJson(permits, null, function () {
    
        // create empty bounds object
        var bounds = new google.maps.LatLngBounds();
    
        // loop through features
        map.data.forEach(function(feature) {
    
            var geo = feature.getGeometry();
    
            geo.forEachLatLng(function(LatLng) {
                bounds.extend(LatLng);
            });
    
        });
    
        // fit data to bounds
        map.fitBounds(bounds);
    
    });
    
    // map data styles
    map.data.setStyle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35
    });

}

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