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();
}
<!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