shahariaazam/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polygon Arrays</title>
    <style>
        /* 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;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    // This example creates a simple polygon representing the Bermuda Triangle.
    // When the user clicks on the polygon an info window opens, showing
    // information about the polygon's coordinates.

    var map;
    var infoWindow;

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

        // Define the LatLng coordinates for the polygon.
        var triangleCoords = [
            {lat: 26.633862, lng: 88.410870},
            {lat: 26.629438, lng: 88.405620}
        ];

        // 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;
    }

    /** @this {google.maps.Polygon} */
    function showArrays(event) {
        // Since this polygon has only one path, we can call getPath() to return the
        // MVCArray of LatLngs.
        var vertices = this.getPath();

        var contentString = '<b>Bermuda Triangle polygon</b><br>' +
                'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
                '<br>';

        // Iterate over the vertices.
        for (var i =0; i < vertices.getLength(); i++) {
            var xy = vertices.getAt(i);
            contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
                    xy.lng();
        }

        // Replace the info window's content and position.
        infoWindow.setContent(contentString);
        infoWindow.setPosition(event.latLng);

        infoWindow.open(map);
    }
</script>
<!--<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqmVTK1Gj2s80nWMyy0_dbBtZjbimvqNo&callback=initMap">
</script>-->
<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAs77aQ8V70A_70dnj6Wwgk9z33avdvV8&callback=initMap">
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
	<meta charset="utf-8">
	<title>Polygon Arrays</title>
	<style>
	/* 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;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script>

	// This example creates a simple polygon representing the Bermuda Triangle.
	// When the user clicks on the polygon an info window opens, showing
	// information about the polygon's coordinates.

	var map;
	var infoWindow;

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

	// Define the LatLng coordinates for the polygon.
	var triangleCoords = [
	{lat: 26.633862, lng: 88.410870},
	{lat: 26.629438, lng: 88.405620}
	];

	// 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;
	}

	/** @this {google.maps.Polygon} */
	function showArrays(event) {
	// Since this polygon has only one path, we can call getPath() to return the
	// MVCArray of LatLngs.
	var vertices = this.getPath();

	var contentString = '<b>Bermuda Triangle polygon</b><br>' +
	'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
	'<br>';

	// Iterate over the vertices.
	for (var i =0; i < vertices.getLength(); i++) {
	var xy = vertices.getAt(i);
	contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
	xy.lng();
	}

	// Replace the info window's content and position.
	infoWindow.setContent(contentString);
	infoWindow.setPosition(event.latLng);

	infoWindow.open(map);
	}
	</script>
	<!--<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqmVTK1Gj2s80nWMyy0_dbBtZjbimvqNo&callback=initMap">
	</script>-->
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAs77aQ8V70A_70dnj6Wwgk9z33avdvV8&callback=initMap">
	</script>
	</body>
	</html>