Narcissistic Pickle Meister

    gmaps-marker-clusterer

    1.2.2 • Public • Published

    GitHub version npm version License License: CC BY-SA 4.0

    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

    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

    Migrated from the Google Maps JavaScript API utility libraries on Google Code.

    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

    <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>
    

    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.

    Live Demos

    Marker Clusterer Screenshot

    Examples page

    License

    All code is licensed under Apache 2.0. See LICENSE-File.

    The gmaps-marker-clusterer Logo is licensed under CC BY-SA 4.0. CC BY-SA 4.0

    Install

    npm i gmaps-marker-clusterer

    DownloadsWeekly Downloads

    1,553

    Version

    1.2.2

    License

    Apache-2.0

    Last publish

    Collaborators

    • sebastianferdinand