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 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.loadGeoJson('https://api.myjson.com/bins/g0tzw');

  map.data.setStyle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

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

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

}

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