Raggruppare i Marker in Google Maps

Avere troppi Marker in una mappa, non è proprio comodo / bello.

In questi casi, la soluzione migliore sarebbe raggrupparli in cluster, e poi usare lo zoom per "espandere" questi cluster.

Farlo è possibile usando una libreria apposita: MarkerClusterer.

Scaricate la libreria, e poi includetela nella pagina:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AP_KEY&sensor=true"></script>
<script type="text/javascript" src="../js/markerclusterer_compiled.js"></script>

Adesso vediamo tutto il codice Javascript; i dati li prenderemo in formato JSON tramite AJAX (potete vedere questo articolo come riferimento):

    var centerMap;
    var map;
    var mapOptions;
    var markerImage = 'marker.png';
    var markerOptions;
    var infoWindow = new google.maps.InfoWindow();

    function initializeMap() {
        centerMap = new google.maps.LatLng(44.892916, 10.48252);
        var mapOptions = {
            center: centerMap,
            zoom: 2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var markers = [];

        $.getJSON("coords.php", function (json) {
            $.each(json, function (i, item) {
                var tooltip = '<div id="tooltip">' +
                        '<p>' + item.clie_cod + ' - ' + item.clie_ragsoc + '<br>' +
                        item.clie_citta + ' - ' + item.clie_prov + '<br>' +
                        item.clie_indirizzo + '<br>' +
                        'PZ: ' + item.qta + '</p>'
                '</div>';

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(item.lat, item.lon),
                    title: item.clie_ragsoc,
                    icon: markerImage,
                    html: tooltip
                });
                addInfoWindow(map, marker, tooltip);
                markers.push(marker);
            });
            markerOptions = {
                styles: [{
                        height: 30,
                        url: markerImage,
                        width: 30
                    }]
            };
            var markerCluster = new MarkerClusterer(map, markers, markerOptions);
        });
    }

    function addInfoWindow(map, marker, message) {
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.close();
            infoWindow.setContent(message);
            infoWindow.open(map, marker);
        });
    }
    google.maps.event.addDomListener(window, 'load', initializeMap);

Nel ciclo each, riempiamo l'array markers mettendo il marker corrente.

Sotto creiamo un oggetto MarkerClusterer, passandogli tre parametri:

• la mappa
• i markers
• le opzioni

Poi ci penserà la libreria a fare il resto.

In sostanza il funzionamento è il seguente: quando la mappa è pozo zoommata, si vedranno pochi markers; man mano che lo zoom aumenta, si vedranno più markers relativi a quella zona che si sta mostrando.

Enjoy!