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.
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.
The infoBox.open(map)
method, after clicking on a FusionTables polygon, is very slow. How do I speed it up?
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?
I found the answer by chance.
You can customise what gets returned by selecting the proper columns in the Change info window layout... window.
Map tab Tools >
Change info window layout...
I deselected 'Polygon', and left 'Number' and 'Province' selected.
The columns you select are then attached to e
in the click
eventListener:
e: (Object)
infoWindowHtml: "Better string"
latLng: Q
pixelOffset: T
row: (Object)
Number: (Object)
Province: (Object)
After selecting the proper columns, you need to change the FusionTable data in some meaningful way to clear the strong caching on Google's side.
The columns selected in the Automatic
tab are returned.
It seems that the Custom
tab gets ignored.