title: MASSIVE GOOGLE MAPS. 5000 places, 5MB. How to make it faster?
body: <p>I'm trying to load a Google Maps v3 that shows 5000 markers clickable. My JS contains 10 lines per place:</p>
  
  <pre><code>              var myLatlng_4821 = new google.maps.LatLng(43.0754329,-71.4699752);
                var contentString_4821 =  "&lt;b&gt;Place 1&lt;/b&gt;";
                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);
                                        });
  </code></pre>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks a lot!</p>
  
  <p><strong>SOLUTION (it's pretty cool).</strong></p>
  
  <pre><code> var myLatlng = [];
   var infowindow = [];
   var marker = [];
  
                    function MakeInfoWindowEvent(map, infowindow, marker) {  
                       return function() {  
                          infowindow.open(map, marker);
                       };  
                    }
  
                    for (var i=0;i &lt; 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]))
  
                    }
           }
  </code></pre>