If you have a map with a lot of markers you’ll eventually have a hard time to see all the maps, especially if you zoom out. There’s a google library called “Js Marker Clusterer” which helps out, it simply builds clusters of markers close together. Unfortunately it’s not maintained anymore, but there aren’t many good alternatives. That’s why we’ve decided to join our effort and create a fork under a new organization. We couldn’t use the same name but wanted to stay close to it’s original name. Because of that we’ve decided to go with Gmaps Marker Clusterer. It’s an attempt to avoid having too many forks which eventually die because of missing interest. Right now we are two contributors, but we are obviously interested in getting more help. You can find the github page here https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer and the documentation (work in progress) here: https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/
Here’s a simple example showing you how to create a google map with clusters. It assumes you have a global array called “data”, it can be found here https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/assets/js/data.json:
var markers = []; 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 options = { imagePath: 'https://raw.githubusercontent.com/gmaps-marker-clusterer/gmaps-marker-clusterer/master/images/m' }; var markerCluster = new MarkerClusterer(map, markers, options); |
As you can see we basically just create our markers through MarkerClusterer and this will then add all of them in a nice way to the already existing map object. A complete example with google maps (you might have to set your own key after &key=) would then look like this:
<style type="text/css">
#map {
width: 600px;
height: 400px;
max-width: 100%;
}
</style>
<div id="map-container"><div id="map"></div></div>
<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 = [];
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 options = {
imagePath: 'https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/assets/images/m'
};
var markerCluster = new MarkerClusterer(map, markers, options);
}
</script>
<script src="markerclusterer.js"></script>
<script src="data.json"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initialize&key="></script> |
You can find a working example here https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/example-simple/. A real life example can be found here, a Swiss site showing you interesting places to spend your time in the nature with your kids, playgrounds, fireplaces and more: https://www.freizeitplatz.ch/
