I have used fusion tables to load multiple FusionTableLayer on google maps . But today suddenly i found out that i was unable to load more than 5 fusiontablelayer at a time in a google map api.
The js code is
<script type="text/javascript" id="telerikClientEvents1">
var layers = [];
var map,jsg;
var layerName, ctr = 0;
jsg = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1jWdnG9b_mQP03PowydJufDpztjWo0AIipDpTjSU'
}, suppressInfoWindows: true
});
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(21.807007904182043, 83.90197012695307),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
// District Layer
jsg.setMap(map);
google.maps.event.addListener(layers[2], 'click', show_info);
google.maps.event.addListener(layers[3], 'click', show_info);
google.maps.event.addListener(layers[4], 'click', show_info);
} // End of INITIALIZE
layers[1] = "";
layers[2] = "";
// Block Layer
layers[2] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1oZafm0cmC9L5FQVHuqLHNxcH3Pw1D_rJFEGnzK0'
}, suppressInfoWindows: true
});
// Gp Layer
layers[3] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1NCtxMDVIcfDZc8bLiTT0nkVBSqwpv3mhsRJS8UM'
}, suppressInfoWindows: true
});
// Village Layer
layers[4] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '15erGSkOpR8L9HsxK25Ps4IfusUjN6996nwtC_qc'
}, suppressInfoWindows: true
});
layers[6] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1RxuDmSZLf5tfcpp0SDWb_50a0dAH1ePFCggby0U',
where: 'PROJ_TYPE = \'Micro Irrigation\''
}, suppressInfoWindows: true
});
layers[7] = "";
layers[8] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1RxuDmSZLf5tfcpp0SDWb_50a0dAH1ePFCggby0U',
where: 'PROJ_TYPE = \'Water Conservation/Harvesting\''
}, suppressInfoWindows: true
});
layers[9] = "";
layers[10] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1RxuDmSZLf5tfcpp0SDWb_50a0dAH1ePFCggby0U',
where: 'PROJ_TYPE = \'Renovation of Traditional Waterbodies\''
}, suppressInfoWindows: true
});
layers[11] = ""
layers[12] = new google.maps.FusionTablesLayer({
query: {
select: '\'geometry\'',
from: '1RxuDmSZLf5tfcpp0SDWb_50a0dAH1ePFCggby0U',
where: 'PROJ_TYPE = \'Construction of Building\''
}, suppressInfoWindows: true
});
//<![CDATA[
//Information Window Shown in DIV
function show_info(layerEvt) {
//document.getElementById('show_info_details').innerHTML = layerEvt.infoWindowHtml;
$("#show_info_details").html(layerEvt.infoWindowHtml);
if (ctr == 0) {
$(".panel").show("slow");
$(".trigger").toggleClass("active");
ctr = 1;
}
}
// Checking and unchecking the treeview checked boxes in map
function RadTreeView1_NodeChecked(sender, args) {
var node = args.get_node();
var childNodes = node.get_nodes();
if (childNodes.get_count() > 0) {
for (var i = 0; i < childNodes.get_count(); i++) {
var childNode = childNodes.getNode(i);
childNode.select();
if (childNode.get_checked()) {
alert("checked called");
layers[childNode.get_value()].setMap(map);
}
else {
alert("Entering");
if (layers[childNode.get_value()] != "") {
alert("Unchecked called");
layers[childNode.get_value()].setMap(null);
}
}
}
}
//checking for node checked
else {
if (node.get_checked()) {
layers[node.get_value()].setMap(map);
}
else {
layers[node.get_value()].setMap(null);
}
}
}
//]]>
</script>
And the tree view code is
<asp:Panel ID="Panel1" runat="server" Height="410px">
<telerik:RadTreeView ID="RadTreeView1" Runat="server" CheckBoxes="True" CheckChildNodes="True"
ShowLineImages="False" Skin="Transparent" TriStateCheckBoxes="False"
onclientnodechecked="RadTreeView1_NodeChecked">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Administartive Boundaries">
<Nodes>
<telerik:RadTreeNode runat="server" Text="District" Value="1" Checkable="False">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Block" Value="2">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="GP" Value="3">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Village" Value="4">
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Schemes">
<Nodes>
<telerik:RadTreeNode runat="server" Text="Micro Irrigation" Value="6">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Flood Control" Value="7" Checkable="False">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Water Conservation/Harvesting" Value="8">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Drought ?" Value="9" Checkable="False">
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Renovation of Traditional Waterbodies" Value="10" >
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="nOTHING" Value="11" Checkable="false" >
</telerik:RadTreeNode>
<telerik:RadTreeNode runat="server" Text="Construction of Building" Value="12" >
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</asp:Panel>
“Limits
You can use the Maps API to add up to five Fusion Tables layers to a map, one of which can be styled with up to five styling rules.”
https://developers.google.com/maps/documentation/javascript/layers#FusionTables