fusion table can not show two layers if we add different styles to the two layers

问题

Due to the limit of 5 fusion table layers and 5 styles of one fusion table layer, I have to try it as: use 5 fusion table layers and each one use two styles, then I can get to my purpose: show 10 different styles in a map.

But after I implemented, I found it only show the first fusion table layer.

Then I wrote a testing case to check why. And found: If we set styles in two layers, only the first layer can be displayed and the second one is gone. If I set style for one layer, it works well.

Below is my code, can someone help on it? Now only one layer is displayed. If we comment the style setting for them or one of them, both layers can be displayed.

Thanks in advance!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#top-box {padding: 10px; background-color:#336699;}
.para-line {font-weight:bold;}
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

    var map;

    function initialize() {
        map = new google.maps.Map(document.getElementById("map_canvas"));
        map.setMapTypeId('roadmap');
        map.setCenter(new google.maps.LatLng(38.4985464, -98.3834298));
        map.setZoom(4);

        var tableid1 =  4436842;

        var style = [{
            where: "State in('IL','PA')",
            polygonOptions: 
            {
                fillColor: "#rrggbb",
                fillOpacity: 0.7  
            }
        },{
            where: "State in('AL')",
            polygonOptions: 
            {
                fillColor: "#006400",
                fillOpacity: 0.7
            }
        }
        ];

        var query1 = {
            select: ['geometry','name'],
            from: tableid1,
            where: "State in('IL','PA')"
        }

        var query2 = {
                select: ['geometry','name'],
                from: tableid1,
                where: "State in('AL')"   
            }

        var layer1 = new google.maps.FusionTablesLayer({
            query:query1,
            styles: style,
            suppressInfoWindows: false,
            clickable:true
        }); 

        layer1.setMap(map);

        var layer2 = new google.maps.FusionTablesLayer({
            query:query2,
            styles:style,
            suppressInfoWindows: false,
            clickable:true
        }); 
        layer2.setMap(map);

        return;

    } 
</script>
</head>
<body onload="initialize()">    
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

回答1:

The limit is (from the documentation "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."

You can style the layers using the FusionTable User Interface, but only one can be styled dynamically and that one can only have 5 styling rules.

来源：https://stackoverflow.com/questions/12119207/fusion-table-can-not-show-two-layers-if-we-add-different-styles-to-the-two-layer

标签

styles

google-fusion-tables