Draggable Polygons

by Sachin Patel

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 creates draggable triangles on the map.
// Note also that the red triangle is geodesic, so its shape changes
// as you drag it north or south.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: {lat: 51.902493, lng: -8.203101},
    mapTypeId: 'terrain'
  });

  var blueCoords = [
     {lat: 51.902493, lng: -8.203101},
     {lat: 51.902493, lng: -8.203101},
  ];

  var redCoords = [
    {lat: 51.902493, lng: -8.203101},
{lat: 51.90235, lng: -8.203055},
{lat: 51.902206, lng: -8.203},
{lat: 51.90203, lng: -8.202929},
{lat: 51.901894, lng: -8.202867},
{lat: 51.901752, lng: -8.20276},
{lat: 51.901627, lng: -8.202655},
{lat: 51.90151, lng: -8.202528},
{lat: 51.901417, lng: -8.202273},
{lat: 51.901417, lng: -8.201973},
{lat: 51.901424, lng: -8.201742},
{lat: 51.901443, lng: -8.20151},
{lat: 51.9015, lng: -8.201294},
{lat: 51.901505, lng: -8.201044},
{lat: 51.901535, lng: -8.200737},
{lat: 51.90159, lng: -8.200421},
{lat: 51.901646, lng: -8.200207},
{lat: 51.901722, lng: -8.200014},
{lat: 51.90181, lng: -8.199838},
{lat: 51.901943, lng: -8.199768},
{lat: 51.90215, lng: -8.199706},
{lat: 51.90234, lng: -8.199672},
{lat: 51.90248, lng: -8.199631},
{lat: 51.902626, lng: -8.199609},
{lat: 51.902813, lng: -8.199613},
{lat: 51.903008, lng: -8.199603},
{lat: 51.9032, lng: -8.199605},
{lat: 51.903347, lng: -8.19961},
{lat: 51.9035, lng: -8.199609},
{lat: 51.903698, lng: -8.199663},
{lat: 51.903847, lng: -8.19969},
{lat: 51.90399, lng: -8.199725},
{lat: 51.90413, lng: -8.199749},
{lat: 51.90428, lng: -8.199779},
{lat: 51.904476, lng: -8.1998205},
{lat: 51.90463, lng: -8.199855},
{lat: 51.904774, lng: -8.199878},
{lat: 51.904964, lng: -8.199898},
{lat: 51.905144, lng: -8.199961},
{lat: 51.905285, lng: -8.199997},
{lat: 51.905426, lng: -8.200036},
{lat: 51.90557, lng: -8.200011},
{lat: 51.905716, lng: -8.199991},
{lat: 51.90587, lng: -8.199993},
{lat: 51.906006, lng: -8.200035},
{lat: 51.90616, lng:...