Marker Clustering - Fusion Table Layer - Google Maps v3

Is there a way to get marker clustering (ie makerclusterer) to work with a Fusion Table layer? It seems that you have to assign markers to markerclusterer yet when using a fusion table layer, Google is handling the markers/infowindows? Still trying to figure this fusion table thing out.

Basically looking for a way to cluster large amounts of markers开发者_StackOverflow社区 being provided via a Fusion Table

Fusion Table Layers render an additional png image for each tile that gets overlaid on top of the map tile, containing the data points for that tile, this is the server side rendering part. So it's multiple data points per tile that contains data points.

Generating your own markers from data, which is necessary for MarkerClusterer, doesn't overlay an image per tile, it creates an individual Marker on the map for each data point and overlays a sprite image on to that.

Based on this, it is not possible to use MarkerClusterer and a FusionTablesLayer.

This is my own code. I was trying the technique in the earlier link but it didn't work for me. So this is how i did it.

First i queried the fusion table with the regular chart api query

function initialize() {
    mapMain = new google.maps.Map(document.getElementById('map-canvas'), {
        center: new google.maps.LatLng(37.4, -100.1),
        zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    mc = new MarkerClusterer(mapMain);
    var queryText = encodeURIComponent("select wikipedia_article, xy from "+tableid);
    var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq="+queryText);
    query.send(handleQueryResponse);
}

Next, in my handleQueryResponse, I dynamically created markers and added it to the Mapclusterer

function handleQueryResponse(response){
     dataTable = response.getDataTable();

    for(var i=0; i< dataTable.getNumberOfRows();i++){           
        var hrefval = dataTable.getValue(i,0).toString();

        var arr = dataTable.getValue(i,1).toString().split(" ");            
        var latlng = new google.maps.LatLng(arr[0], arr[1]);

        var marker = new google.maps.Marker({
            position: latlng,
            map:mapMain
        });
        fn = markerClick(i, marker);
        google.maps.event.addListener(marker,'click', fn);          
        markers.push(marker);
    }
    mc.addMarkers(markers);
}

In this case, the main map, the array of markers (mc in the code below) are global variables. You can see the full working example here.

I don't think you will get it work with a fusion table. IMO the fusion table is lacking the support for a spatial index. A si helps reduce the 2d complexity to a 1d complexity. It's uses in a lot of applications like heatmaps, treemaps, post code search, maps application. You want to look for Nick's hilbert curve spatial index quadtree blog.

Fusion Tables allows you to view thousands of points at once by using server side rendering (from the google servers). Marker Clusterer solves the problem by building a set of clusters from nearest points (from the clients browser). I wouldn't necessarily use them both at the same time, but it might work for your use case it's up to you.

You can read more information about how they work here:

http://code.google.com/apis/maps/articles/toomanymarkers.html

If you really wanted too you could use the Fusion Tables API to feed the data from Fusion Tables to the Marker Clusterer.

Hope this helps.