Stack Overflow #6611634 - Google Maps v3 - MarkerCusterer

by ian_smithz

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=drawing&amp;dummy=.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/data.json"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/src/markerclusterer_compiled.js"></script>
<h3>Using 
    <a href="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclusterer/1.0/">MarkerClusterer 1.0</a>
    </h3>

<div id="map"></div>
<button id="clear-all">Clear MarkerClusterer</button>

CSS

#map {
    width:100%;
    height:250px;
    border: 1px solid #4D2722;
}

JavaScript

$(document).ready(function () {
    var baseLa = 60.630286;
    var baseLo = 6.426004;
    var markers = [];
    var markerClusterer;

    $('#clear-all').click(function () {
        // Unset all markers
        var i = 0,
            l = markers.length;
        for (i; i < l; i++) {
            markers[i].setMap(null)
        }
        markers = [];

        // Clears all clusters and markers from the clusterer.
        markerClusterer.clearMarkers();
    });

    var options = {
        'zoom': 12,
            'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), options);

    // Create random markers
    for (var i = 0; i < 50; i++) {
        var lat = baseLa + (Math.random() / 10);
        var lng = baseLo + (Math.random() / 10);
        var latLng = new google.maps.LatLng(lat, lng);
        var marker = new google.maps.Marker({
            'position': latLng
        });
        markers.push(marker);
    }

    map.setCenter(latLng);
    markerClusterer = new MarkerClusterer(map, markers);
});