Google Maps Polygon

Select Polygon on Google Maps

by ceebee

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=AIzaSyBXSvVZ6CLvhZUJFR7qNF343UJUgsSIdkM&callback=initMap">
</script>

CSS

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

#map {
  height: 100%;
}

JavaScript

// This example adds a user-editable rectangle to the map.
var bermudaTriangle;
var triangleCoords;
var infoWindow;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    //center: {lat: 44.5452, lng: -78.5389},
    // 40.26517704380911, -111.68422543334964
    center: {
      lat: 40.27074868691302,
      lng: -111.68295297002808
    },
    zoom: 19
  });
  //map.mapTypes.set(customMapTypeId, customMapType);
  map.setMapTypeId(google.maps.MapTypeId.HYBRID);

  /*
  40.268064637674414, -111.68711608886719
40.26517281511765, -111.68310925292968
40.26792413576215, -111.68063739013667
40.26943518106775, -111.68404840087896
  */
  triangleCoords = [{
    "lat": 40.270954463873366,
    "lng": -111.6831571483612
  }, {
    "lat": 40.270823515132875,
    "lng": -111.68315753269195
  }, {
    "lat": 40.270803966006376,
    "lng": -111.68281534385676
  }, {
    "lat": 40.27094929310328,
    "lng": -111.68282531356817
  }];

  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    //bounds: bounds,
    draggable: true,
    editable: true
  });
  bermudaTriangle.setMap(map);
  bermudaTriangle.addListener('click', showNewRect);

  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}

function showNewRect(event) {
  var triPaths = bermudaTriangle.getPaths();
  var triPoints = triPaths.getArray()[0].b;

  var contentString = '<b>Poly info.</b><br>' +
    'Center: ' + JSON.stringify(map.getCenter().toJSON()) + '<br>' +
    'Zoom: ' + map.getZoom() + '<br>' +
    'Coords:<br>' + JSON.stringify(triPoints);

  //triPoints.forEach(function(item, key) {
  //console.log(item,key);
  //contentString += item.lat() + ', ' + item.lng() + '<br>';
  //});

  //console.log(bermudaTriangle, triPaths, triPaths.getArray());
  //console.log(triPaths.getArray()[0].b);

  // Set the...