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

var x = new google.maps.LatLng(51.8948201, -0.7333298);

function initialize() {
  var data = {
    type: "Feature",
    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]
        ]
      ]
    }
  };

  var mapProp = {
    center: x,
    zoom: 16,
    mapTypeId: 'satellite'
  };

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

  map.data.addGeoJson(data);

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

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