JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div id="map_canvas"></div>

CSS

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

JavaScript

var map;
      var mapOptions = { center: new google.maps.LatLng(41.87774145109676, -87.62008666992188),
        zoom: 14,
        minZoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

      function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        google.maps.event.addListener(map, 'center_changed', function() {
          checkBounds();
        });

        var allowedBounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(41.85200239592201, -87.66565397011107),
          new google.maps.LatLng(41.903255924231566, -87.57922246681517));

        function checkBounds() {
          if(allowedBounds.contains(map.getCenter())) {
            return;
          }
          var mapCenter = map.getCenter();
          var X = mapCenter.lng();
          var Y = mapCenter.lat();

          var AmaxX = allowedBounds.getNorthEast().lng();
          var AmaxY = allowedBounds.getNorthEast().lat();
          var AminX = allowedBounds.getSouthWest().lng();
          var AminY = allowedBounds.getSouthWest().lat();
 
          if (X < AminX) {X = AminX;}
          if (X > AmaxX) {X = AmaxX;}
          if (Y < AminY) {Y = AminY;}
          if (Y > AmaxY) {Y = AmaxY;}
       
           map.setCenter(new google.maps.LatLng(Y,X));
        }
      }

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