google maps clusterer no markers

I am trying to use markerclusterplus.js with the google maps api v3. I am looping through an array of addresses geocoding each one and adding a marker and info window. I am pushing the markers to an array called markers and using the following code to add these to my cluster

var markerCluster = new MarkerClusterer(map, markers);

No clustered markers are showing up. The rest of the code works, If I add

map: map

to my markers they show up as standard markers so this is all okay. When alerting the markers array using

alert(markers.toString())

nothing is returned so possibly nothing is being pushed to the array?

Full code below

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

</head>

<body>

<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
              zoom: 2,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              disableDefaultUI: true,
            }; 
var LatLngList = [];

//Geocoder function
function myGeocode() {

    infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    var titles = ['Anne of Cleves House',
        'Lewes Castle',
        'Michelham Priory',
        'Fishbourne Roman Palace & Gardens',
        'Marlipins Museum','The Priest House',
        'The Long Man'
        ];

    var addresses =[
        'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
        'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
        'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
        'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
        'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
        'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
        'The long man of wilmington'
    ];

    var descriptions = [
        'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
        'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
        'England\'s longest water filled moat surrounds the site which dates back to 1229.',
        'Welcome to the largest Roman home in Britain',
        'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
        'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
        'the long man of wilmington'
    ];

    for (var i = 0; i < addresses.length; i++) { 

        var address = addresses[i];
        var title = titles[i];
        var description = descriptions[i];
        //var alink = links[i];
        var markers = [];
        var marker;

        (function(address, title, description) {

            geocoder.geocode( {"address": address }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                    latlng = results[0].geometry.location;
                    LatLngList.push(latlng);

                    map.setCenter(latlng);

                    marker = new google.maps.Marker({
                        position: latlng
                        //map: map, 
                        //title: title,
                     }); 

                    markers.push(marker);

                    google.maps.event.addListener(marker, "click", function () {
                        infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href=''>Get directions</a></div>");
                    infowindow.open(map, marker);
                    });

                } 
                else {
                  document.getElementById("text_status").value = status;
                }

            });//end of geocoder
        })(address, title, description); // <- Call function, pass the vars to be captured 
    }//end of for loop

    alert(markers.toString())
    var markerCluster = new MarkerClusterer(map, markers);

    //  Create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds ();
    //  Go through each...
    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
      //  And increase the bounds to take this point
      bounds.extend (LatLngList[i]);
    }
    //  Fit these bounds to the map
    map.fitBounds (bounds);

    //alert(LatLngList.join('\n'))
}

window.onload=myGeocode;
</script>

<div id="map_canvas" style="width:600px; height:600px;"></div>  

</body>

</html>


ANSWERS:


First, you are redefining the markers array each time within the loop, must have markers array defined outside of loop.

Secondly, geocoder.geocode works asynchronously, so the geocoding is not actually finished until well after the loop ends and even later then your alert() call.

Thirdly, it is not necessary to use a closure within the loop, as you are then redefining a function each time through the loop. I always prefer in this case to add a private method within the current function. So then the function doing the geocoding call is only defined once and called as needed. Now all we need to do is to watch (from within the geocoder's callback function) the length of the markers array grow until it is same length as the addresses array and then we know all geocoding has finished (assuming of course all went well), time to complete things:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
</head>
<body>
<script type="text/javascript">
var map; //Map variable
var geocoder; //Geocoder variable
var infowindow;
//var marker; //Marker variable
//Options variable
var myOptions = {
              zoom: 2,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              disableDefaultUI: true,
            }; 
var LatLngList = [];

//Geocoder function
function myGeocode() {
    infowindow = new google.maps.InfoWindow({
        maxWidth: 200
    });
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    geocoder = new google.maps.Geocoder();
    var titles = [
        'Anne of Cleves House',
        'Lewes Castle',
        'Michelham Priory',
        'Fishbourne Roman Palace & Gardens',
        'Marlipins Museum','The Priest House',
        'The Long Man'
        ];

    var addresses =[
        'Anne of Cleves House, 52, Southover High St, Lewes, BN7 1JA',
        'Barbican House Museum, 169, High Street, Lewes, BN7 1YE',
        'Michelham Priory, Upper Dicker, Hailsham, East Sussex, BN27 3QS',
        'Fishbourne Roman Palace, Roman Way, Fishbourne, West Sussex, PO19 3QR',
        'Marlipins Museum, High Street, Shoreham-by-Sea, West Sussex, BN43 5DA',
        'The Priest House, North Lane, West Hoathly, West Sussex, RH19 4PP',
        'The long man of wilmington'
    ];

    var descriptions = [
        'Anne of Cleves House you can explore how the Tudors and Elizabethans lived, worked and relaxed at home.',
        'Climb to the top of this 1000 year old Norman Castle for stunning panoramic views across Sussex.',
        'England\'s longest water filled moat surrounds the site which dates back to 1229.',
        'Welcome to the largest Roman home in Britain',
        'The striking chequerboard flint and Caen limestone facade is part of one of the oldest Norman buildings in Sussex.',
        'The only one of its kind open to the public, this beautiful 15th century Wealden hall house stands in a traditional cottage garden.',
        'the long man of wilmington'
    ];
    var markers = [];
     //private function, only need be defined once!
    function getGeocode(address, title, description) {
        geocoder.geocode( {"address": address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                latlng = results[0].geometry.location;
                LatLngList.push(latlng);
                map.setCenter(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                    //title: title,
                }); 
                markers.push(marker);
                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent("<div class='map-infowindow'><h4 class='gm-title'>"+title+"</h4>"+description+"'<a class='gm-directions' href=''>Get directions</a></div>");
                    infowindow.open(map, marker);
                });
                if (markers.length == addresses.length) { //we have received all of our geocoder responses
                    alert(markers);
                    var markerCluster = new MarkerClusterer(map, markers);
                    //  Create a new viewpoint bound
                    var bounds = new google.maps.LatLngBounds ();
                    //  Go through each...
                    for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
                        //  And increase the bounds to take this point
                        bounds.extend (LatLngList[i]);
                    }
                    //  Fit these bounds to the map
                    map.fitBounds (bounds);
                }
            } else {
                document.getElementById("text_status").value = status;
            }
        });//end of geocoder
    }
    for (var i = 0; i < addresses.length; i++) { 
        var address = addresses[i];
        var title = titles[i];
        var description = descriptions[i];
        //var alink = links[i];
         //put our private function to work:
        getGeocode(address, title, description);
    }//end of for loop
}

window.onload=myGeocode;
</script>
<div id="map_canvas" style="width:600px; height:600px;"></div>  
</body>
</html>


 MORE:


 ? Google maps clusters is formed for every marker not for all map
 ? MarkerClusterer & jQuery UI Map: clusters not showing
 ? Get all markers in Google Maps v3 Jquery
 ? Mapbox - clustering only markers on the same coordinates
 ? Marker cluster on google map
 ? Animate cluster of markerclusterer
 ? Google Maps Api Marker Cluster Activate?
 ? Google Maps MarkerCluster API: How to get clusters outside of screen's view?
 ? Google Maps MarkerCluster API: How to get clusters outside of screen's view?
 ? Google Maps MarkerCluster API: How to get clusters outside of screen's view?