JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

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

SCSS

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

JavaScript

function initialize() {

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

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

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

  map.data.addGeoJson(data);

}

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