Search code examples
javascriptpolygongoogle-fusion-tablesinfowindowinfobox

How do I speed up infoBox.open() on FusionTables layer click?


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?


Solution

  • 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)
    

    Important Note (here's the luck)

    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.