JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
CSS
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
JavaScript
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var US = {
NorthEast: {
lat: 49.38,
lng: -66.94
},
SouthWest: {
lat: 25.82,
lng: -124.39
}
}
var USbounds = new google.maps.LatLngBounds(new google.maps.LatLng(US.SouthWest.lat, US.SouthWest.lng),
new google.maps.LatLng(US.NorthEast.lat, US.NorthEast.lng));
map.fitBounds(USbounds);
var USrect = new google.maps.Rectangle({map:map, bounds: USbounds});
}
google.maps.event.addDomListener(window, "load", initialize);