https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer
Fork of the marker clustering library for the Google Maps JavaScript API v3.
https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer
javascript maps
Last synced: about 1 year ago
JSON representation
Fork of the marker clustering library for the Google Maps JavaScript API v3.
- Host: GitHub
- URL: https://github.com/gmaps-marker-clusterer/gmaps-marker-clusterer
- Owner: gmaps-marker-clusterer
- License: apache-2.0
- Created: 2016-11-30T09:33:30.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-05-09T15:50:46.000Z (about 4 years ago)
- Last Synced: 2025-04-13T06:15:10.509Z (about 1 year ago)
- Topics: javascript, maps
- Language: JavaScript
- Homepage: https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/
- Size: 629 KB
- Stars: 98
- Watchers: 10
- Forks: 48
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/gh/gmaps-marker-clusterer%2Fgmaps-marker-clusterer) [](https://badge.fury.io/js/gmaps-marker-clusterer) [](https://opensource.org/licenses/Apache-2.0) [](http://creativecommons.org/licenses/by-sa/4.0/) [](https://www.jsdelivr.com/package/npm/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
# Gmaps 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.
[Reference documentation](https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/)
Migrated from the [Google Maps JavaScript API utility libraries on Google Code](https://code.google.com/p/google-maps-utility-library-v3/).
## Usage
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
```
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);
```
### Custom CSS
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);
}
```
Have a look at the [custom-css example](examples/custom-css_example.html).
## Live Demos
[](https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/#examples)
[Examples page](https://gmaps-marker-clusterer.github.io/gmaps-marker-clusterer/#examples)
## License
All code is licensed under Apache 2.0. See [LICENSE](LICENSE)-File.
The gmaps-marker-clusterer Logo is licensed under [CC BY-SA 4.0](http://creativecommons.org/licenses/by-sa/4.0/).
[](http://creativecommons.org/licenses/by-sa/4.0/)