GOOGLE MAPS masivo. 5000 lugares, de 5 MB. Cómo hacerlo más rápido?

Question

Estoy intentando cargar un Google Maps v3 5000 que muestra marcadores seleccionables. Mi JS contiene 10 líneas por plaza:

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

Por lo que me da a 50 000 líneas js (5 MB). Me gustaría para almacenar en caché, pero heroku no permite que una página a tomar más de 30 años de carga de modo que ni siquiera puedo almacenar en caché una vez.

¿Le tiene ningún trucos para cargar esta página más rápido? Sólo he podido hacerlo localmente (tarda 45s ~). No tengo nada más a la carga. Yo uso RoR.

Muchas gracias!

SOLUCIÓN (que es muy bueno).

 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 he entendido bien, usted tiene el código de ejemplo repite 5000 veces, con '4821', el lat y lng y la cadena de contenido diferente para cada uno de los marcadores 5000?

Si es así, entonces usted necesita cambiar su enfoque de manera que sus los datos que se repiten '' y no el código ...

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

Esto reduciría el tamaño de su página en una cantidad significativa, y probablemente va a resolver el problema de almacenamiento en caché.

Una palabra de advertencia - el código anterior simplemente ilustra cómo quitar el código repetido y reemplazarla con las operaciones de búsqueda de datos, pero puede haber problemas con la creación de tantos casos InfoWindow a la vez (Probablemente sería mejor crear la ventana de información en el interior del oyente. Además, no estoy completamente seguro sobre el visiblity de las variables en los cierres, por lo que puede terminar con 5000 marcadores tener los atributos del último elemento de la lista (se pueden requerir cambios leves)

Answer 2

Como toda la información que necesita para un solo marcador es la siguiente:

[lat,lng,contentString]

... que podría almacenar estos datos en una matriz y la matriz de bucle. Dependiendo de la contentString ahora debería necesitar algo de 150KB hacia arriba, lo que no debería ser un gran problema.

Si los datos relacionados con los markes no cambia puede utilizar un js-archivo externo, por lo que el navegador puede utilizarlas desde su caché en futuras visitas.

Answer 3

No estoy seguro de lo que la sobrecarga de los constructores para la InfoWindow Google y se Marker, me puedo imaginar que están fuerte, pero puedo decir con seguridad que al añadir una nueva función utilizando las variables de cerradura, que' volver a la prevención de la venta de objetos CADA en la rutina.

Esto puede explicar la mayor parte de su problema y es un escenario clásico para una pérdida de memoria. Ver la respuesta aceptada desde este post .

Yo estaría de acuerdo en que sería mejor de lo que necesita almacenar en una matriz y sólo cuando sea necesario crear instancias en su controlador de clic.