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>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
