google map markers performance

Question

на моем сайте http://offersmapper.com/ У меня есть карта, которая должна показывать от 2000 до 5000 маркеров. действительно медленный. я попытался с markercluster как это было предложено, но ничего ... скорее всего, я делаю что-то неправильно ... любой, кто может помочь мне ?:

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

Пытайтесь уменьшить HTML код: Вы должны передать данные javascript как json-объект. Чем javascript должен перебирать все элементы и создавать маркеры, и т. Д. Mutch sorter html code, и более быстрая загрузка.

Я предполагаю, что вы используете JQuery для кодирования JavaScript:

 ... //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> 

И если этого недостаточно, вы можете загрузить данные с помощью AJAX.