I think I found the problem with your code. I've highlighted the line below:
setTimeout(function() {
...
icon: icon.icon,
animation: google.maps.Animation.DROP
});
return marker; // <---!!!!!!! This line !!!!!!!!!
setTimeout(function () {
bindInfoWindow(marker, map, infoWindow, html);
...
}, i * 50);
Calling return marker; here exits the downloadUrl function. Anything after the return statement isn't executed, so the second setTimeout is never reached and the marker is never added to the cluster.
Because your code is all in one function, the second setTimeout has access to the marker variable. Removing return marker; will allow the code contained in the second setTimeout to execute. Note that I can't test that this will fix the issue because I don't have access to your data script and link that you provided doesn't match the example code in the question. But I think it should do the trick.
Update (10/15/2012): Reply to Comment
Ok. I see two problems with your demo code.
First, remove the random number generation. I used that in my example to generate random coordinates. You seem to have lat/lng for all of your points, and multiplying them by a random number is not what you want do.
This:
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat"))* (Math.random() * (max - min) + min) ,
parseFloat(markers[i].getAttribute("lng"))* (Math.random() * (max - min) + min));
Should be:
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"))
);
Secondly, you need to add the markers to an instance of markerCluster. Right now, they are just being added to the array cluster. Either make cluster a markerClusterer instance, or instantiate another variable to use as your markerClusterer instance. For example: var mc = new MarkerClusterer(map);. Then use mc.addMarker(marker); to add a marker to the cluster in the second setTimeout.
Update (10/16/2012): Reply to 2nd Comment
Sorry--there's still one issue with your code. Because of the way JavaScript works (asynchronously) and the way your code is structured, when the first setTimeout is called, all the variables used to construct the marker (point, type, etc) are actually referencing the last item in your data. You have to break your code into smaller functions (generally a good practice to follow anyway), and use what's called a closure. More on that here: https://stackoverflow.com/questions/111102/how-do-javascript-closures-work. Here is a simplified example how this technique can be used to implement marker animation + markerClusterer: http://jsfiddle.net/WASLk/2/.
Note that I didn't need to do this in my original example because all the data used to build the markers (the random coordinates) was contained within the addMarker function.
If you know the amount of attributes ahead of time, you can use Layers to get the job done. Leaflet has a good tutorial on that.
Basically, you loop through the initial array and split them into two separate arrays based on the specified variable. Then you add each array to it's own LayerGroup which gives you an easy way to turn the Markers on and off en-masse.
Here's a working jsfiddle showing how it works.
Best Answer
yes, it's possible. As long you have the coordinate, then you can display either using OpenLayers or GMap.