Simple Polygon

HTML

<div id="result"></div>
<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?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

CSS

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

#map {
  height: 100%;
}

JavaScript

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 24.886,
      lng: -70.268
    },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [{
    lat: 25.774,
    lng: -80.190
  }, {
    lat: 18.466,
    lng: -66.118
  }, {
    lat: 32.321,
    lng: -64.757
  }, {
    lat: 25.774,
    lng: -80.190
  }];

  // Construct the polygon.
  var boundaryPolygon = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    clickable: false
  });
  boundaryPolygon.setMap(map);
  google.maps.event.addListener(map, 'click', function(event) {
    if (boundaryPolygon != null && google.maps.geometry.poly.containsLocation(event.latLng, boundaryPolygon)) {
      document.getElementById('result').innerHTML = 'You live in this area.';
    } else {
      //alert(event.latLng + " Du bist ein Ossi!");
      document.getElementById('result').innerHTML = 'You live outside this area.';
    }
  });
  google.maps.event.trigger(map, 'click', {
    latLng: new google.maps.LatLng(24.886, -70.268)
  });
}