Google Maps demo

by Checha Man

HTML

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
  margin: 10% 5%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map;
var mapStyles = [
    {
        "featureType": "administrative",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#ff0000"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#888888"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#ffffff"
            }
        ]
    }
];

var pinLocations = [{
	position: new google.maps.LatLng(22.976, 77.307),
  desc: 'India',
  value: 42
}, {
	position: new google.maps.LatLng(48.44, 63.94),
  desc: 'Kazakhstan',
  value: 12
}, {
	position: new google.maps.LatLng(56.94, 24.14),
  desc: 'Latvia',
  value: 33
}, {
	position: new google.maps.LatLng(-17.83, 30.96),
  desc: 'Zimbabwe',
  value: 29
}, {
	position: new google.maps.LatLng(-9.30, -75.78),
  desc: 'Peru',
  value: 36
}, {
	position: new google.maps.LatLng(1.233, 103.739),
  desc: 'Singapore',
  value: 14
}, {
	position: new google.maps.LatLng(3.811, 102.17),
  desc: 'Malaysia',
  value: 16
}, {
	position: new google.maps.LatLng(14.64, 108.248),
  desc: 'Vietnam',
  value: 24
}, {
	position: new...