google map markers performance - google-maps

Question

on my web site http://offersmapper.com/
i have a map that has to show from 2000 to 5000 markers. is really slow.
i tried with markercluster as suggested but nothing... most probably i'm doing something wrong... any one that can help me?:
function initialize() {
var mapOptions = {
zoom: <? echo $zoom; ?>,
center: new google.maps.LatLng(<? echo $lat ?>, <? echo $lng ?>),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var markers_1 = [];
<?
while($deal=mysql_fetch_assoc($query))
{
$t="
var contentString".$deal['id']."='".$info."';
var InfoWin".$deal['id']."= new google.maps.InfoWindow({
content: contentString".$deal['id'].",
maxWidth: 300
});
var marker".$deal['id']." = new google.maps.Marker({
position: new google.maps.LatLng(".$deal['lat'].", ".$deal['lng']."),
icon: ".$icon."
});
google.maps.event.addListener(marker".$deal['id'].", 'click', function() {
InfoWin".$deal['id'].".open(map,marker".$deal['id'].");
});
markers_1.push(marker".$deal['id'].");";
echo $t;
}
?>
var markerCluster_1 = new MarkerClusterer(map, markers_1, {maxZoom: 7, gridSize: 25, styles: styles[0]} );

Answer 1

Try to reduce your html code:
You should pass data to javascript as a json object. Than javascript should iterate over all elements and create markers , etc.. mutch sorter html code, and faster load.
I assume you use jQuery for javascript coding:
... //your code before the while loop
<?
$deals = array();
while($deal=mysql_fetch_assoc($query)){
$deals[$deal[$id]] = $deal;
}?>
<script type="text/javascript">
var deals = <?=json_encode($deals)?>;
var infoWindow = [];
var marker =[];
$.each(deals,function(k,v){
var i = k;
infoWindow[i] = new google.maps.InfoWindow({
content: v.info,
maxWidth: 300 });
markers[i] = new google.maps.Marker({
position: new google.maps.LatLng(v.lat, v.lng), icon: v.icon
});
google.maps.event.addListener(markers[i] , 'click', function(){
infoWindow[i].open(map,markers[i]);
});
});
var markerCluster_1 = new MarkerClusterer(map, markers, {maxZoom: 7, gridSize: 25, styles: styles[0]} );
</script>
And if it is not enough, you can load the data via ajax.