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
A JavaScript API utility library for Google Maps
A Google Maps JavaScript API v3 library to create and manage per-zoom-level clusters for large amounts of markers.
Migrated from the Google Maps JavaScript API utility libraries on Google Code.
Download or clone markerclusterer.js and images m1.png to m5.png, save images in images folder.
To use your own custom cluster images just name your images 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.
index.html
<div id="map-container"><div id="map"></div></div>
<script src="markerclusterer.js"></script>
<script>
function initialize() {
var center = new google.maps.LatLng(51.5074, 0.1278);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.5074, 0.1278)
});
markers.push(marker);
var options = {
imagePath: 'images/m'
};
var markerCluster = new MarkerClusterer(map, markers, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Customize the cluster pins by using the cssClass-option.
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);
.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);
}
Have a look at the custom-css example.
All code is licensed under Apache 2.0. See LICENSE-File.
The gmaps-marker-clusterer Logo is licensed under CC BY-SA 4.0.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent