MASSIVE mappe di Google. 5000 posti, 5 MB. Come per renderlo più veloce?

Question

Sto cercando di caricare un Google Maps v3 che mostra 5000 marcatori cliccabile. Il mio JS contiene 10 linee per posto:

              var myLatlng_4821 = new google.maps.LatLng(43.0754329,-71.4699752);
              var contentString_4821 =  "<b>Place 1</b>";
              var infowindow_4821 = new google.maps.InfoWindow({content: contentString_4821});
              var marker_4821 = new google.maps.Marker({
                                          position: myLatlng_4821, 
                                          map: map, 
                                          icon: image
                                      });
             google.maps.event.addListener(marker_4821, 'click', function() {
                                        infowindow_4821.open(map,marker_4821);
                                      });

Quindi, mi dà un 50 000 linee js (5MB). Mi piacerebbe mettere in cache, ma Heroku non consente una pagina per prendere più di 30 anni a carico, quindi non posso nemmeno in cache una volta.

Avreste trucchi per caricare questa pagina più veloce? Ho solo riuscito a farlo a livello locale (prende 45s ~). Non ho nient'altro da carico. Io uso RoR.

Grazie mille!

SOLUTION (è abbastanza freddo).

 var myLatlng = [];
 var infowindow = [];
 var marker = [];

                  function MakeInfoWindowEvent(map, infowindow, marker) {  
                     return function() {  
                        infowindow.open(map, marker);
                     };  
                  }

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

                        myLatlng[i] = new google.maps.LatLng(places[i][0],places[i][1]);

                         infowindow[i] = new google.maps.InfoWindow({
                                 content: places[i][2]
                             });

                         marker[i] = new google.maps.Marker({
                              position: myLatlng[i],
                              map: map
                          });

                           google.maps.event.addListener(marker[i], 'click', MakeInfoWindowEvent(map, infowindow[i], marker[i]))

                  }
         }

Answer 1

Se ho capito bene, si ha il codice di esempio ripetuto 5000 volte, con '4821', il lat & lng e la stringa di contenuto diverso per ognuno dei marcatori 5000?

Se è così, allora avete bisogno di cambiare il vostro approccio in modo che i suoi i dati che è 'ripetuti' e non il codice ...

var markers = [
    [43.0754329,-71.4699752,"Info for first marker"],
    [45.0473490,-56.47688356,"Info for second marker"],
    .
    .
    .
    [20.1234384,12.23462566,"Info for last marker"]
];
for(var i=0; i < markers.length; i++){
    var latLng = new google.maps.LatLng(markers[i][0], markers[i][1]);
    var contentString =  markers[i][2];              
    var infowindow = new google.maps.InfoWindow({content: contentString});
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        icon: image
    });
    google.maps.event.addListener(marker, 'click', function()
    {
        infowindow.open(map,marker);
    });
}

Ciò ridurrebbe le dimensioni della pagina da una quantità significativa, e probabilmente risolvere il problema di cache.

Una parola di avvertimento però - il codice di cui sopra solo illustra come rimuovere il codice ripetuto e sostituirlo con i dati di ricerca, ma ci possono essere problemi con la creazione di tanti casi infowindow in una sola volta (Si sarebbe probabilmente meglio creare l'InfoWindow dentro l'ascoltatore. Inoltre, io non sono del tutto sicuro della visiblity di variabili nelle chiusure, così si può finire con 5000 marcatori con le caratteristiche del l'ultimo elemento della lista (può essere richiesto lievi modifiche)

Answer 2

Come tutte le informazioni di cui avete bisogno per un singolo marcatore è questa:

[lat,lng,contentString]

... è possibile memorizzare questi dati in un array e loop di matrice. A seconda del contentString ora si dovrebbe bisogno di qualcosa da 150KB verso l'alto, ciò che non dovrebbe essere un grosso problema.

Se i dati relativi alle markes non cambia è possibile utilizzare un js-file esterno, in modo che il navigatore possa utilizzarli da esso di cache sul visite future.

Answer 3

Non sono sicuro di quello che il sovraccarico sui costruttori per la InfoWindow e Marker Google sono, posso immaginare che siano pesante, ma vi posso dire per certo che con l'aggiunta di una nuova funzione che utilizza le variabili di chiusura, è' ri prevenire lo scarico dell'oggetto OGNI nella routine.

Questo può spiegare la maggior parte del problema e non è uno scenario classico per una perdita di memoria. Vedere la risposta accettata da questo post .

Sono d'accordo che si starebbe meglio memorizzare ciò che è necessario in un array e solo un'istanza quando necessario nel vostro gestore di clic.