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() {

  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {
      lat: 0,
      lng: 0
    }
  });

  google.maps.event.addListenerOnce(map, 'idle', function() {

    // Load GeoJSON.
    map.data.loadGeoJson('https://api.myjson.com/bins/g0tzw');

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

    // Loop through features
    map.data.forEach(function(feature) {

      var geo = feature.getGeometry();

      geo.forEachLatLng(function(LatLng) {

        bounds.extend(LatLng);
        
      });
      
    });

    map.fitBounds(bounds);
    
  });

}

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