This is my own code. I tried to use the technique in an earlier link, but this did not work for me. So this is how I did it.
First I requested a merge table with a regular query api chart
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); }
Then, in my handleQueryResponse, I dynamically created markers and added it to 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, an array of markers (mc in the code below), are global variables. You can see the full working example here .
source share