Data Layer: Polygon

by Diana Lemen

HTML

<div id="map"></div>
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</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 uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
{lat: -22.2911, lng: 30.190399999999954},
{lat: -22.329, lng: 30.460199999999986},
{lat: -22.2978, lng: 30.711599999999976},
{lat: -22.2907, lng: 30.91610000000003},
{lat: -22.3078, lng: 31.073399999999992},
{lat: -22.3449, lng: 31.19730000000004},
{lat: -22.402, lng: 31.28780000000006},
{lat: -22.4547, lng: 31.29320000000007},
{lat: -22.4786, lng: 31.300200000000018},
{lat: -22.6175, lng: 31.347999999999956},
{lat: -22.8251, lng: 31.41930000000002},
{lat: -23.0167, lng: 31.466699999999946},
{lat: -23.2795, lng: 31.5317},
{lat: -23.4258, lng: 31.52959999999996},
{lat: -23.4823, lng: 31.545600000000036},
{lat: -23.5529, lng: 31.604100000000017},
{lat: -23.6743, lng: 31.67560000000003},
{lat: -23.7431, lng: 31.700000000000045},
{lat: -23.7946, lng: 31.723999999999933},
{lat: -23.8922, lng: 31.799600000000055},
{lat: -24.0402, lng: 31.858299999999986},
{lat: -24.2362, lng: 31.908000000000015},
{lat: -24.3303, lng: 31.95060000000001},
{lat: -24.3764, lng: 31.966699999999946},
{lat: -24.4607, lng: 31.98580000000004},
{lat: -24.6383, lng: 31.98320000000001},
{lat: -24.8441, lng: 31.98440000000005},
{lat: -25.0739, lng: 31.98580000000004},
{lat: -25.2635, lng: 31.986999999999966},
{lat: -25.3594, lng: 31.97939999999994},
{lat: -25.632, lng: 31.984500000000025},
{lat: -25.7739, lng: 31.920299999999997},
{lat: -25.8854, lng: 31.928300000000036},
{lat: -25.9576, lng: 31.948300000000017},
{lat: -25.9688, lng: 31.921699999999987},
{lat: -25.9816, lng: 31.87149999999997},
{lat: -25.8673, lng: 31.640499999999975},
{lat: -25.7465, lng: 31.41509999999994},
{lat: -25.743, lng: 31.382600000000025},
{lat: -25.7556, lng:...