JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" 			src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"/>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }

JavaScript

function initialize() {
	var mapOptions = {
		center: new google.maps.LatLng(39, -91),
		zoom: 4,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map-canvas"),
			mapOptions);
		
	// bounds of the desired area
	var allowedBounds = new google.maps.LatLngBounds(
	  new google.maps.LatLng(28.70, -127.50),
	  new google.maps.LatLng(48.85, -55.90)
	);
	var boundLimits = {
		maxLat : allowedBounds.getNorthEast().lat(),
		maxLng : allowedBounds.getNorthEast().lng(),
		minLat : allowedBounds.getSouthWest().lat(),
		minLng : allowedBounds.getSouthWest().lng()
	};

	var lastValidCenter = map.getCenter();
	var newLat, newLng;
	google.maps.event.addListener(map, 'center_changed', function() {
        var bounds = map.getBounds();
        var ne = bounds.getNorthEast();
        var sw = bounds.getSouthWest();
                
        if (allowedBounds.contains(ne) && allowedBounds.contains(sw)) {
            // still within valid bounds, so save the last valid position
            lastValidCenter = map.getCenter();
        }
                
        var newLng = lastValidCenter.lng();
        var newLat = lastValidCenter.lat();
        
        if(Math.min(sw.lng(), ne.lng()) > boundLimits.minLng &&
           Math.max(sw.lng(), ne.lng()) < boundLimits.maxLng){
            newLng = map.getCenter().lng();
        }
        if(Math.min(sw.lat(), ne.lat()) > boundLimits.minLat &&
           Math.max(sw.lat(), ne.lat()) < boundLimits.maxLat){
            newLat = map.getCenter().lat();
        }
        map.panTo(new google.maps.LatLng(newLat, newLng));
	});
}
google.maps.event.addDomListener(window, 'load', initialize);