The library creates and manages per-zoom-level clusters for large amounts of markers. Google API v3.
npm install gmaps-marker-clusterer   
Please note: This is a fork of the js-marker-clusterer library, the original repository can be found here https://github.com/googlemaps/js-marker-clusterer
!Logo
markerclusterer.js and images m1.png to m5.png, save images in images folder.
m[1-5].png or set the imagePath option to the location and name of your images like this: imagePath: 'customImages/cat' for images cat1.png to cat5.png.
`
$3
Customize the cluster pins by using the cssClass-option.
#### Adding a custom CSS-Class custom-pin to the options:
`
var center = new google.maps.LatLng(37.4419, -122.1419),
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}),
markers = [],
options = {
cssClass: 'custom-pin'
};
for (var i = 0; i < 100; i++) {
var dataPhoto = data.photos[i];
var latLng = new google.maps.LatLng(dataPhoto.latitude,
dataPhoto.longitude);
var marker = new google.maps.Marker({
position: latLng
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, options);
`
#### Add your custom styles:
`
.custom-pin {
height: 1em;
line-height: 1;
width: 1em;
padding: .7em;
text-align: center;
cursor: pointer;
color: white;
background: black;
position: absolute;
border-radius: .5em;
font-size: 1em;
font-weight: bold;
transition: all 500ms;
}
.custom-pin::after {
content: '';
border-width: 1em .5em;
border-color: black transparent transparent transparent;
border-style: solid;
position: absolute;
top: 99%;
left: calc(50% - .5em);
}
.custom-pin:hover {
transform: scale(1.15);
}
``