MASSIVE GOOGLE MAPS. 5000 places, 5MB. Comment le rendre plus rapide?

Question

Je suis en train de charger une carte Google Maps v3 montre 5000 marqueurs cliquables. Mon JS contient 10 lignes par place:

              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);
                                      });

Il me donne 50 000 d'une des lignes (5 Mo). J'aimerais mettre en cache, mais Heroku ne permet pas une page de prendre plus de 30 ans à charge, donc je ne peux pas mettre en cache même une fois.

Auriez-vous des astuces pour charger cette page plus rapide? Je ne réussi à le faire localement (prend 45s ~). Je n'ai rien d'autre à charge. J'utilise RoR.

Merci beaucoup!

SOLUTION (il est assez cool).

 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

Si je vous comprends bien, vous avez l'exemple de code répété 5000 fois, avec « 4821 », le lat et lng et la chaîne de contenu différent pour chacun des marqueurs 5000?

Si oui, alors vous devez changer votre approche afin que ses données qui sont « répétées » et non le code ...

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);
    });
}

Cela réduirait la taille de votre page par une quantité importante, et résoudra probablement le problème de la mise en cache.

Un mot d'avertissement cependant - le code ci-dessus illustre simplement comment supprimer le code répété et le remplacer par des données lookup, mais il peut y avoir des problèmes avec la création de tant de cas de InfoWindow à la fois (Vous seriez probablement mieux de créer la InfoWindow à l'intérieur de l'auditeur. De plus, je ne suis pas complètement sûr de la visiblité des variables dans les fermetures, de sorte que vous pouvez retrouver avec 5000 marqueurs ayant les attributs du dernier élément de la liste (de légères modifications peuvent être nécessaires)

Answer 2

Comme toutes les informations dont vous avez besoin pour un seul marqueur est le suivant:

[lat,lng,contentString]

... vous pouvez stocker ces données dans un tableau et la boucle du tableau. Selon le contentString, vous devriez maintenant besoin de quelque chose de 150KB vers le haut, ce qui ne devrait pas être un gros problème.

Si les données relatives aux markes ne change pas, vous pouvez utiliser un fichier externe js, de sorte que le navigateur peut les utiliser dans son cache sur les visites futures.

Answer 3

Je ne sais pas ce que les frais généraux sur les constructeurs pour la InfoWindow Google et Marker sont, je peux imaginer qu'ils sont lourdes, mais je peux vous dire avec certitude que l'ajout d'une nouvelle fonction en utilisant les variables de fermeture, vous re empêcher l'élimination de l'objet CHAQUE dans la routine.

Cela peut expliquer la majeure partie de votre problème et est un scénario classique pour une fuite de mémoire. Voir la réponse acceptée de ce poste .

Je suis d'accord que vous feriez mieux de stocker ce que vous avez besoin dans un tableau et seulement instanciation si nécessaire dans votre gestionnaire de clic.