Optimization strategy for creating 1000s of infowindows on a Google map

Question

I'm new to the Google Maps API and have just taken over an RoR application that plots up to 2,000 markers on a map using MarkerClusterer and each marker has an associated infowindow.

The current implementation creates an array of infowindow content strings in JavaScript and downloads the JavaScript to the browser. Uncompressed (without server content compression), the array and Javascript can be as large as 9 MB.

The performance bottlenecks associated with this implementation that I have found are: 1. Time on server to create 2000 strings and put them in the JavaScript array. (~4-5 seconds) 2. Time on server to compress the multi-megabyte JavaScript before sending to the browser. (~2-3 seconds)

My initials thought is to create a template for the infowindow content string that contains all of the HTML formatting so that the only data contained in the array of infowindow contents are the actual raw numbers to be displayed. This should greatly reduce the compute time of assembling the content strings array on the server, and correspondingly reduce the memory consumed by the array in the browser. Also, only one infowindow needs to be open at a time.

Being unfamiliar with the Google Maps v3 API, I'm looking for any guidance as to whether or not this is the best strategy for optimization. And, any pointers to code samples that implement this type of strategy.

Thanks in advance,

-Scott

Answer 1

I think you should not load all 2000 datasets in your array, but doing one of 2 alternatives:

1. You only load the markers and so the infowindows that are in the current viewport.
2. You load the infowindow content by ajax, when clicking the marker.