Improve performance loading several marker with maps v3

Question

I've a function to load several marker to a map (Maps api v3):

function displayPois(){
    // Delete all POI marker from map
    if(poiMarker.length > 0){
        for (var i = 0; i < poiMarker.length; i++) {
                poiMarker[i].setMap(null);    
        };
    };
    // If zoom ok load marker data for map tile
    if (map.getZoom() > 10){
        var bnds = [];
        var bounds = map.getBounds();
        bnds[0] = bounds.getNorthEast().lat(); 
        bnds[1] = bounds.getNorthEast().lng(); 
        bnds[2] = bounds.getSouthWest().lat();
        bnds[3] = bounds.getSouthWest().lng();

          $.ajax({
            url  : base_url+"trackplanner/getpois",
            type : 'POST',
            data : {poirange : bnds},
            success: function(data) {
                if(data.length > 0){
                    var obj = $.parseJSON(data);
                    $.each(obj,function(i,poi){
                        var marker = null;
                        var infowindow = null;
                        var infostr = '<div id="trackplanner_poiwin"><b>'+poi.name+'</b><br />'+poi.street+'<br />'+poi.postalcode+' '+poi.city+'<br />'+poi.phone+'<br />';
                        if(poi.mail != ''){infostr = infostr + '<a href="mailto:'+poi.mail+'">'+poi.mail+'</a><br />'};
                        if(poi.web != ''){infostr = infostr + '<a href="'+poi.web+'">'+poi.web+'</a>'};
                        infostr = infostr + '</div>'
                        infowindow = new google.maps.InfoWindow({
                            content: infostr
                        });
                        marker = new google.maps.Marker({
                            position: new google.maps.LatLng(poi.lat,poi.lng),
                            icon:'images/'+ poi.category +'.png',
                            title: poi.name,
                            map: map
                        });
                        poiMarker.push(marker);
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.open(map,marker);
                        });
                    });
                }
            },
            error: function() {console.log('error');}
          });
    };    
};

These are the listeners:

google.maps.event.addListener(map, 'dragend', function() {
   displayPois();
});
google.maps.event.addListener(map, 'zoom_changed', function() {
   displayPois();
});

Are there any options to improve the Performance? Are the listening events the good ones for loading POI's? POI's are about 30-40 on a map tile.

Best regards ...

Answer 1

The best thing i found is to use MarkerClusterer

here's the library : http://googlegeodevelopers.blogspot.com/2009/04/markerclusterer-solution-to-too-many.html

here's some performance test : http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/examples/speed_test_example.html