ENORME GOOGLE MAPS.5000 lugares, 5MB.Como fazer mais rápido?

Question

Eu estou tentando carregar um Google Maps v3 que mostra 5000 marcadores clicável.Meu JS contém 10 linhas por lugar:

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

Então, isso me dá 50 000 linhas de js (5MB).Eu gostaria de cache, mas heroku não permite uma página para levar mais de 30s para carregar, então eu não posso mesmo cache de uma vez.

Você tem algum truque para carregar essa página mais rápido?Eu só consegui fazê-lo localmente (leva 45s~).Eu não tenho nada mais para carregar.Eu uso o RoR.

Muito obrigado!

SOLUÇÃO (é bem legal).

 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 eu entendi bem, você tem o exemplo de código repetido de 5000 vezes, com '4821', a lat e lng e a cadeia de caracteres de conteúdo diferentes para cada um dos 5000 marcadores?

Se assim for, então você precisa mudar sua abordagem de modo a que os seus dados o que é "repetido" e não o 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);
    });
}

Isto iria reduzir o tamanho da sua página por uma quantidade significativa, e provavelmente vai resolver o problema de cache.

Uma palavra de advertência, porém - o código acima apenas ilustra como remover o código repetido e substituí-lo com dados de pesquisa, mas pode haver problemas com a criação de tantos InfoWindow instâncias de uma só vez (Você provavelmente seria melhor criar a InfoWindow dentro do ouvinte.Além disso, eu não estou completamente certo sobre o visiblity de variáveis nos fechos, portanto, você pode acabar com 5000 marcadores de ter os atributos do último item na lista (ligeiras alterações podem ser necessárias)

Answer 2

Como todas as informações necessárias para um único marcador é o seguinte:

[lat,lng,contentString]

... Você pode armazenar esses dados em uma matriz e fazer um loop da matriz. Dependendo do conteúdo, agora você deve precisar de algo de 150kb para cima, o que não deve ser um grande problema.

Se os dados relacionados às marcas não mudarem, você poderá usar um arquivo JS externo, para que o navegador possa usá-los em seu cache em visitas futuras.

Answer 3

Eu não tenho certeza do que a sobrecarga sobre os construtores para o Google InfoWindow e Marker são, eu posso imaginar que eles estão pesadas, mas eu posso dizer com certeza que a adição de uma nova função, usando o encerramento variáveis, você está impedindo a eliminação de TODOS os objetos na rotina.

Isso pode representar a maioria do seu problema e é um clássico, um cenário, um vazamento de memória.Veja o aceite resposta este o post.

Eu concordo que o melhor é armazenar o que você precisa em uma matriz e apenas instanciar quando necessário no seu manipulador de clique.