Dynamic add marker cluster on google map

Question

I want to dynamically add markers on map and cluster them using markerCluster like the link below: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.html The scenario is , when users get into my website, they will see an initial google map, and when they press the button, I'll go back to my database to get 100 data and draw on map for users because 100 data is kind of big on may especially they are close, so I want to use markerCluster, but somehow it didn't work and I can't find out why, there is no error show in console(I use chrome's web developer tools)

here is my javascript, I use java, javascript and jsp:

$('#addMarkerData').click(function(){
console.log('into addMarkerData click function');
$.get('getphoto.do',{},function(Result){
    var markers = [];
    var image = 'img/location.png';
    for(var i=0; i < 100; i++){
            console.log(Result[i].photoId);
            console.log(Result[i].latitude);
            console.log(Result[i].longitude);
            console.log(Result[i].imgURL);  
              var latLng = new google.maps.LatLng(Result[i].latitude,
                      Result[i].longitude);
              var marker = new google.maps.Marker({
                  animation: google.maps.Animation.DROP,
                  position: latLng,
                  icon: image
              });
              markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
    console.log(markerCluster.getTotalMarkers());
});  

});

The variable map is declare on another .js files, and will be loaded before this .js files

one more thing, the last line in my code, console.log(markerCluster.getTotalMarkers()) show the correct answer (100) ,btw

it would be very appreciated if anyone could give me some advice thanks

Answer 1

You should create MarkerClusterer outside the function so that you can use it over and over. You could create it immediately after creating the map:

var map = new google.maps.Map();
var markerCluster = new MarkerClusterer(map);

You can then use the addMarker() or addMarkers() method inside your JSON callbacks. The same marker clusterer will be used each time so any previously added markers will not be deleted. Rough outline of the code:

$('#addMarkerData').click(function () {
    $.get('getphoto.do', {}, function (Result) {
        var markers = [];
        for (var i = 0; i < Result.length; i++) {
            var marker = new google.maps.Marker({
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng(Result[i].latitude, Result[i].longitude),
                icon: 'img/location.png'
            });
            markers.push(marker);
        }
        markerCluster.addMarkers(markers);
        console.log(markerCluster.getTotalMarkers());
    });
});