Google Maps With States Overlay

built from LyleScott/google-maps-us-states-polygons

by merganser

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing&callback=initMap" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var stateCoords = [
 ['Ohio',
  [[38.4385, -82.3425],
   [38.5707, -82.2917],
   [38.5965, -82.1722],
   [38.7712, -82.1997],
   [39.0181, -82.0294],
   [38.875, -81.8729],
   [38.9359, -81.7644],
   [39.1865, -81.7397],
   [39.2812, -81.568],
   [39.4022, -81.4444],
   [39.346, -81.3661],
   [39.4479, -81.1244],
   [39.5549, -81.0352],
   [39.6565, -80.8374],
   [39.8676, -80.7948],
   [40.5941, -80.652],
   [40.6223, -80.5188],
   [42.321, -80.5229],
   [42.2153, -81.2521],
   [41.9962, -81.6806],
   [41.9962, -81.7094],
   [41.677, -82.3961],
   [41.6709, -82.6845],
   [41.9585, -83.1157],
   [41.7314, -83.4219],
   [41.6944, -84.8021],
   [39.1056, -84.8172],
   [39.1407, -84.7444],
   [39.096, -84.5068],
   [39.0459, -84.4052],
   [38.9434, -84.2857],
   [38.8055, -84.2432],
   [38.7712, -84.0866],
   [38.7519, -83.8916],
   [38.633, -83.6636],
   [38.6962, -83.5263],
   [38.5976, -83.2736],
   [38.6169, -83.1445],
   [38.7027, -83.0127],
   [38.7327, -82.8973],
   [38.5782, -82.8355],
   [38.3761, -82.5952]]]];

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(23, -101),
    zoom: 4,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
  });
  

        var drawingManager = new google.maps.drawing.DrawingManager({
          drawingMode: google.maps.drawing.OverlayType.MARKER,
          drawingControl: true,
          drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle']
          },
          markerOptions: {icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'},
          circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: false,
            editable: true,
            zIndex: 1
          }
        });
       ...