Web Tutorials

Interview Q & A

Code Examples

Utility Tools

Add Polygon Array on Google Maps

In this example you will learn how to add polygon array on google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

function showArrays(event) {  
  var vertices = this.getPath();  
  var contentString = 'Triangle polygon 
' + 'Clicked location:' + event.latLng.lat() + ',' + event.latLng.lng()+ ' '; // Iterate over the vertices. for (var i =0; i < vertices.getLength(); i++) { var xy = vertices.getAt(i); contentString += ' ' + 'Coordinate ' + i + ':' + xy.lat() + ',' + xy.lng(); }

Add Polygon Array on Google Maps Example

<!DOCTYPE html>  
<html>  
  <head> <!-- www.techstrikers.com -->  
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">  
    <meta charset="utf-8">  
    <title>Polygon Arrays</title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%;
        width:99%;
      }  
    </style>  
    <script async defer  
     src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>  
  <script>  
  
var map;  
var infoWindow;  
  
function initMap() {  
   var lat_lng = {lat: 22.08672, lng: 79.42444};
  map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  });  
  
  var triangleCoords =     
[{lat:23.67502, lng:76.2533},         
{lat:23.58179, lng:82.6034},        
{lat:25.0757, lng:79.1537},    
{lat:23.67502, lng:76.2537}];
  
  // Construct the polygon.  
  var bermudaTriangle = new google.maps.Polygon({  
    paths: triangleCoords,  
    strokeColor: '#FF0000',  
    strokeOpacity: 0.8,  
    strokeWeight: 3,  
    fillColor: '#FF0000',  
    fillOpacity: 0.35  
  });  
  bermudaTriangle.setMap(map);  
  // Add a listener for the click event.  
  bermudaTriangle.addListener('click', showArrays);  
  infoWindow = new google.maps.InfoWindow;  
}  

function showArrays(event) {  
  var vertices = this.getPath();  
  var contentString = '<b>Triangle polygon</b> <br/>' +  
 'Clicked location:' + event.latLng.lat() + ',' + event.latLng.lng()+ ' ';  
  
  // Iterate over the vertices.  
  for (var i =0; i < vertices.getLength(); i++) {  
    var xy = vertices.getAt(i);  
    contentString += ' ' + 'Coordinate ' + i + ':' + xy.lat() + ',' +  
        xy.lng();  
  }  
  
  // Replace the info window's content and position.  
  infoWindow.setContent(contentString);  
  infoWindow.setPosition(event.latLng);  
  
  infoWindow.open(map);  
}  
    </script>  
  </head>  
  <body>  
    <div id="map"></div>  
  </body>  
</html>

Above example will produce following output