Google Maps Polygon basic

Basic polygon with single ring outline

by Daan De Smedt

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  </head>
  <body>
    <div id="map"></div>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly"
      async
    ></script>
  </body>
</html>

CSS

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

let map;
let infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 18,
    center: {
      lat: 51.279811196403,
      lng: 5.1824816377468
    },
    mapTypeId: "terrain",
  });
	
  const simplePolygon = [{
      "lat": 51.28005299609215,
      "lng": 5.183207518138616
    },
    {
      "lat": 51.279358467744736,
      "lng": 5.181775091507334
    },
    {
      "lat": 51.2793923516024,
      "lng": 5.181759790716981
    },
    {
      "lat": 51.27943578593998,
      "lng": 5.181740177994825
    },
    {
      "lat": 51.279475351210415,
      "lng": 5.181722312080902
    },
    {
      "lat": 51.27950892939388,
      "lng": 5.181707149194509
    },
    {
      "lat": 51.2797663700653,
      "lng": 5.182262234483114
    },
    {
      "lat": 51.27985286558074,
      "lng": 5.182231284277293
    },
    {
      "lat": 51.27997271332351,
      "lng": 5.182521215245654
    },
    {
      "lat": 51.28021668573778,
      "lng": 5.183111461532959
    },
    {
      "lat": 51.28014659532447,
      "lng": 5.183152591125152
    },
    {
      "lat": 51.28011363717901,
      "lng": 5.183171931878546
    },
    {
      "lat": 51.28006836416855,
      "lng": 5.183198499811988
    },
    {
      "lat": 51.28005299609215,
      "lng": 5.183207518138616
    }
  ];
  
  const polygon = new google.maps.Polygon({
    paths: simplePolygon,
    strokeColor: "blue",
    strokeOpacity: 0.6,
    strokeWeight: 3,
    fillColor: "blue",
    fillOpacity: 0.2,
  });
  polygon.setMap(map);
  polygon.addListener("click", showArrays);
  infoWindow = new google.maps.InfoWindow();
}

function showArrays(event) {
  let contentString = "Clicked location EPSG:3857 : <br><b>" + 
  event.latLng.lat() + "," + event.latLng.lng() + "</b><br>";
    
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);
  infoWindow.open(map);
}