Polygon Drawing Example

by Steve Jansen

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp;libraries=geometry,drawing"></script>
<div id="map-canvas"></div>

CSS

#map-canvas{
    height: 400px;
    width: 100%;
    background-color: red;
}

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.
// source: https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
function initialize() {
    
  var mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(0,0),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
       
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

    // Define the LatLng coordinates for the polygon's path.
  var coords = [
    new google.maps.LatLng(1,1),
    new google.maps.LatLng(-1,1),
    new google.maps.LatLng(-1,-1),
    new google.maps.LatLng(1,-1)
  ];

  // Construct the polygon.
  var polygon = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });
    
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_CENTER,
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    }
  });
  drawingManager.setMap(map);

  google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {  
      
    var index = 0;
      polygon.getPaths().forEach(function(path){
          path.forEach(function(point){
            console.log(index, point.lat(), point.lng());
          });
          index++;
      });
  });
}
google.maps.event.addDomListener(window, 'load', initialize);