google map cluster not working

Question

<script>
    var lat = "";
    var map = "";
    var markers = [];
    function initMap() {
        if ($("#map").length) {
            var mapOptions = {
                zoom: 13, 
                center: new google.maps.LatLng(37.498214, 127.027535), 
                scrollwheel: true, 
                mapTypeControl: false 
            };
            var geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), mapOptions); 
            var image = 'img/marker.png'; 
            for (i = 0; i < 1; i++) { // this database size
                var address = 'addressvalue';
                geocoder.geocode({'address': address}, function (results, status) {
                    if (status === google.maps.GeocoderStatus.OK) {
                        lat = results[0].geometry.location;
                        lat = lat.toString().split(" ");
                        lat[0] = lat[0].replace('(', '');
                        lat[0] = lat[0].replace(',', '');
                        lat[1] = lat[1].replace(')', '');
                        map.setCenter(new google.maps.LatLng(lat[0], lat[1]));
                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location,
                            icon: image,
                            title: 'test'
                        });
                        markers.push(marker);
                        var infowindow = new google.maps.InfoWindow({
                            content: '<div>1234</div>'
                        });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });
                    } else {
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });
            }
            markerClusterer = new MarkerClusterer(map, markers, {
                maxZoom: 10,
                gridSize: 10
            });
            google.maps.event.addDomListener(window, "resize", function () {
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);
            });
        }
    }
</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.js"></script>

I followed google map API but I got the problem.

I want marker and cluster. this is problem.

When click markers, show window title. this is not problem.

Where did I did wrong?

Answer 1

The problem is you're doing the geocoder.geocode() function call, which is asynchronous, to get the data to create your markers. However the line where you create the MarkerClusterer isn't within that geocode function's callback. So it will be happening before the markers are created, and just using an empty array at that point.

I'm not entirely sure of the point of your for loop. But assuming you're needing it, the trick might be to create an empty MarkerClusterer before your geocoding. Then within the callback, add each marker into the MarkerClusterer as soon as you create it.

Something like this:

var markerClusterer = new MarkerClusterer(map, [], {
    maxZoom: 10,
    gridSize: 10
});

for (i = 0; i < 1; i++) { // this database size
    var address = 'addressvalue';
    geocoder.geocode({'address': address}, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                icon: image,
                title: 'test'
            });
            markers.push(marker);

            markerClusterer.addMarker(marker);
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    });
}