<!DOCTYPE html>
<html>
<head>
<meta name=»viewport» content=»initial-scale=1.0, user-scalable=no»>
<meta charset=»utf-8″>
<title>Marker Clustering</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>

function initMap() {

var map = new google.maps.Map(document.getElementById(‘map’), {
zoom: 3,
center: {lat: -28.024, lng: 140.887}
});

// Create an array of alphabetical characters used to label the markers.
var labels = ‘ABCDEFGHIJKLMNOPQRSTUVWXYZ’;

// Add some markers to the map.
// Note: The code uses the JavaScript Array.prototype.map() method to
// create an array of markers based on a given «locations» array.
// The map() method here has nothing to do with the Google Maps API.
var markers = locations.map(function(location, i) {
return new google.maps.Marker({
position: location,
label: labels[i % labels.length] });
});

// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: ‘https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m’});
}
var locations = [
{lat: 61.71983, lng: -75.5868144},
{lat: 4.717138, lng: -74.031135}
] </script>
<script src=»https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js»>
</script>
<script async defer
src=»https://maps.googleapis.com/maps/api/js?key=(AIzaSyD5LkMuNf2Ls-6eQDUwCdB1MOK8xc0Iuo8g&)callback=initMap»>