Setup
I have a polygon map of all the Provinces in South Africa.
This is then pulled into a v3 Google Map as a FusionTablesLayer as follows:
// The Google Map object
map = new google.maps.Map( mapCanvas, mapOptions );
// The FusionTables layer
layer['provinces'] = new google.maps.FusionTablesLayer({
query: {
select: '*',
from: '16L-UK_1OZxGw6DlKR8V8yP4XZrtmNdOMugRRNrQ'
},
clickable: true,
suppressInfoWindows: true // Hide the default FusionTables InfoWindow
});
Right after that, I attach a click event listener to the FusionTablesLayer, and build a custom InfoBox object as follows:
google.maps.event.addListener(layer['provinces'], 'click', function(e){
/*
Here I build the infoBox HTML using e.row[]
eg: html = '<div>' + e.row['Province'].value + '</div>';
*/
// Attach the infoBox to the click
infoBox.setContent(html);
infoBox.setPosition(e.latLng);
infoBox.open(map);
});
After that, I render the layer on the map:
// Render the layer on the map
layer['provinces'].setMap(map);
All of this works. No problem.
Problem
The click event returns all the columns in the respective row of the FusionTable, and attaches it to the variable e above.
Now, each row in the FusionTable has a very long KML string - from 114kb to 2.5MB - and this is returned in e.infoWindowHtml as well as e.row['Polygon'].value.
e: (Object)
infoWindowHtml: "_Very_ long string in here."
latLng: Q
pixelOffset: T
row: (Object)
Number: (Object)
Polygon: (Object)
Province: (Object)
The request doesn't take very long due to heavy caching on Google's side, but after clicking on a Province, it takes almost 5 seconds for the infoBox to pop up.
tl;dr
The infoBox.open(map) method, after clicking on a FusionTables polygon, is very slow. How do I speed it up?
Update
The data is cached after the first click. Is there a way to cache the data before the first click?
Alternatively, is there a way to limit the returned variables attached to e, i.e.: remove the 'Polygon' data from the click request?
