Question

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?

Was it helpful?

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.

OTHER TIPS

Its speedy the second time to open the popup, so I presume it gets cached. The KML's are rather large tho, thats your bottleneck - can't you simplify them? For a decent overview you don't need that much detail. That should speed it up. (try replacing one province with just a rectangle and see if that helps)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top