Question

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>
Was it helpful?

Solution

"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

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