Simple Polygon

by Christian Bonato

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&amp;ext=.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Polygon</title>

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

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

"use strict";

// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 5,
    center: {
      lat: 42.2483022,
      lng: 12.7580163
    },
    mapTypeId: "terrain"
  }); // Define the LatLng coordinates for the polygon's path.

  const triangleCoords = [
    {
      lat: 25.774,
      lng: -80.19
    },
    {
      lat: 18.466,
      lng: -66.118
    },
    {
      lat: 32.321,
      lng: -64.757
    },
    {
      lat: 25.774,
      lng: -80.19
    }
  ]; // Construct the polygon.

  const bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}