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: "Feature",
    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]
        ]
      ]
    }
  };

  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);