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

var permits = {
    type: "FeatureCollection",
    id: "permits",
    features: [{
        type: "Feature",
        properties: {
            name: "Alpha Field"
        },
        geometry: {
            type: "Polygon",
            coordinates: [
                [
                    [-0.72863, 51.895995],[-0.730022, 51.896766],[-0.730754, 51.896524],[-0.731234, 51.896401],[-0.731832, 51.896294],[-0.732345, 51.896219],[-0.732945, 51.896102],[-0.732691, 51.895774],[-0.732618, 51.895531],[-0.732543, 51.895359],[-0.73152, 51.894751],[-0.731037, 51.894488],[-0.730708, 51.894324],[-0.72863, 51.895995]
                ]
            ]
        }
    },
        {
            type: "Feature",
            properties: {
                name: "Beta Field"
            },
            geometry: {
                type: "Polygon",
                coordinates: [
                    [
                        [-0.728004, 51.895658],[-0.72863, 51.895995],[-0.730708, 51.894324],[-0.731217, 51.893784],[-0.730992, 51.893709],[-0.730793, 51.893567],[-0.730734, 51.893435],[-0.730761, 51.89333],[-0.729696, 51.893244],[-0.729391, 51.89314],[-0.729249, 51.893586],[-0.728991, 51.894152],[-0.728525, 51.894983],[-0.728004, 51.895658]
                    ]
                ]
            }
        }
    ]
};

var map;

function initialize() {

  var mapProp = {
    center: new google.maps.LatLng(51.8948201, -0.7333298),
    zoom: 17,
    mapTypeId: 'satellite'
  };

  map = new google.maps.Map(document.getElementById("map"), mapProp);

  map.data.addGeoJson(permits);

  map.data.setStyle({
    fillColor: 'red',
    strokeWeight: 1
  });

  // var bounds = new google.maps.LatLngBounds();

  // map.fitBounds(bounds);
  // map.setCenter(bounds.getCenter());

}

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