JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;ext=.js"></script>
<script src="https://cdn.rawgit.com/geocodezip/geoxml3/master/polys/geoxml3.js"></script>
<div id="map_canvas"></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,
      minZoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(39.719429, -80.519562),
    new google.maps.LatLng(42.267879, -74.690033));
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var geoxml = new geoXML3.parser({
      map: map,
      zoom: false,
      suppressInfoWindows: true,
    });
    geoxml.parseKmlString(PAstr);
    var lastCenter = bounds.getCenter();
    var polygon = new google.maps.Polygon({
      path: geoxml.docs[0].gpolygons[0].getPaths().getAt(1)
    });
    google.maps.event.addListener(map, 'center_changed', function() {
      var center = map.getCenter();
      if (!google.maps.geometry.poly.containsLocation(center, polygon)) {
        map.setCenter(lastCenter);
      } else {
        lastCenter = center;
      }
    });
  });
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
var PAstr = '<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://earth.google.com/kml/2.2"><Document><name>United States divisions. Level 1</name><description><![CDATA[<a href="http://www.gadm.org">GADM</a> boundaries.]]></description><Style id="14"><LineStyle><width>1.5</width><color>ff000000</color></LineStyle><PolyStyle><color>FF6E6E6E</color><fill>1</fill></PolyStyle></Style><Placemark><name>Pennsylvania</name><description><![CDATA[State]]></description><styleUrl>#14</styleUrl><visibility>1</visibility><MultiGeometry><Polygon><outerBoundaryIs><LinearRing><coordinates>180,85 90,85 0,85 -90,85 -180,85 -180,0 -180,-85 -90,-85 0,-85 90,-85 180,-85 180,0 180,85</coordinates></LinearRing></outerBoundaryIs><innerBoundaryIs><LinearRing><coordinates>-79.7624969482421,42.2678794860841 -79.7633285522461,42.1857109069827...