MASSIVE GOOGLE MAPS. 5000 places, 5MB. How to make it faster?

Question

I'm trying to load a Google Maps v3 that shows 5000 markers clickable. My JS contains 10 lines per 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);
                                      });

So it gives me a 50 000 lines js (5MB). I would love to cache it but heroku doesn't allow a page to take more than 30s to load so I can't even cache it once.

Would you have any tricks to load this page faster? I only managed to do it locally (takes 45s~). I have nothing else to load. I use RoR.

Thanks a lot!

SOLUTION (it's pretty 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]))

                  }
         }

Do you need all 5000 to be visible at once and at the same zoom level? — Bart, Nov 23 '10 at 08:19
Yeah unfortunately... Thks. I'm trying to implement what Dr. Molle said right now.. — Alextoul, Nov 23 '10 at 08:45

belugabob · Accepted Answer · 2010-11-24T08:12:49.637

If I understand you correctly, you have the example code repeated 5000 times, with '4821', the lat&lng and the content string differing for each of the 5000 markers?

If so, then you need to change your approach so that its the data that is 'repeated' and not the 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);
    });
}

This would reduce the size of your page by a significant amount, and will probably solve the caching issue.

A word of warning though - the above code merely illustrates how to remove the repeated code and replace it with data lookup, but there may be issues with creating so many InfoWindow instances at once (You would probably be better off creating the InfoWindow inside the listener. Also, I'm not completely sure about the visiblity of variables in the closures, so you may end up with 5000 markers having the attributes of the last item in the list (slight changes may be required)

It works! And as you said all the markers point to the last marker ):. Working on it, but the solution might be to go back to my 50000 lines... Thks a lot BTW! — Alextoul, Nov 25 '10 at 09:07
Just found the solution. I edited the post so everyone can enjoy it! Thks guy!! — Alextoul, Nov 25 '10 at 09:25
Excellent - glad that I was able to point you in the right direction, and that you worked out a solution to the closure issue on your own. Your next challenge is to use only a single InfoWindow instance - this would entail you making sure that you close the InfoWindow if it is already open, when you click on a marker. — belugabob, Nov 25 '10 at 15:03

Dr.Molle · Answer 2 · 2010-11-23T08:30:26.697

2

As all information you need for a single marker is this:

[lat,lng,contentString]

...you could store this data in an array and loop the array. Depending on the contentString you should now need something from 150KB upwards, what shouldn't be a big problem.

If the data related to the markes doesn't change you can use an external js-file, so the browser can use them from it's cache on future visits.

edited Nov 23 '10 at 08:30

answered Nov 23 '10 at 08:22

Dr.Molle

116,463
16
195
201

score 0 · Answer 3 · edited May 23 '17 at 11:47

I'm not sure what the overhead on the constructors for the Google InfoWindow and Marker are, I can imagine they're hefty, but I can tell you for sure that by adding a new function using the closure variables, you're preventing the disposal of EVERY object in the routine.

This may account for the majority of your problem and is a classic scenario for a memory leak. See the accepted answer from this post.

I would agree that you'd be better off storing what you need in an array and only instantiating when necessary in your click handler.

MASSIVE GOOGLE MAPS. 5000 places, 5MB. How to make it faster?

3 Answers3

Linked