JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    // LatLngBounds(sw?:LatLng, ne?:LatLng)	Constructs a rectangle from the points at its south-west and north-east corners.
   var allowedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(-85, -180, true),
    new google.maps.LatLng(85, 180, true)
);  

lastValidCenter = map.getCenter();
    
google.maps.event.addListener(map, "center_changed", function() {
    document.getElementById('info').innerHTML = allowedBounds.toUrlValue(6)+"<br>"+map.getCenter().toUrlValue(6)+"<br>"+allowedBounds.contains(map.getCenter());
    if (allowedBounds.contains(map.getCenter())) {
        lastValidCenter = map.getCenter();
        return; 
    }

    map.panTo(lastValidCenter);
});
}
google.maps.event.addDomListener(window, "load", initialize);