Drawing tools

by Brian Houlihan

HTML

<div id="map"></div>
<div id="info"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCabgHH5U4dApFACeJBJEuSH1J7c83OMiU&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

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 41.771930,
      lng: -88.148951
    },
    zoom: 8
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [{"lat":41.87677511335505,"lng":-87.61718967446326},{"lat":41.827674922049376,"lng":-88.11157444008826},{"lat":41.801063249177375,"lng":-88.40271213540076},{"lat":41.766246687011325,"lng":-88.51532199868201},{"lat":41.61857875642993,"lng":-88.42193820961951},{"lat":41.53639456808585,"lng":-88.13629367836951},{"lat":41.52405792054438,"lng":-87.90558078774451},{"lat":41.50349161358324,"lng":-87.60071018227576},{"lat":41.565170929697935,"lng":-87.49084690102576},{"lat":41.684250798856425,"lng":-87.50183322915076}];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [{"lat":41.8926721787763,"lng":-87.64083332421875},{"lat":41.82721316062632,"lng":-88.31099933984375},{"lat":41.79855377137636,"lng":-88.48678058984375},{"lat":41.933550035079385,"lng":-88.51973957421875},{"lat":42.13754651052775,"lng":-88.53621906640625},{"lat":42.15791013928866,"lng":-87.76168293359375}];



  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1])})

  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: ['polygon']
    },
    polygonOptions: {
      editable: true
    }

  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    event.overlay.set('editable',...