My Fusion Tables won't style the way I want them to, even though I followed the Fusion Tables sample code. What am I doing wrong?
Question
I'm trying to control what colors my map is, but it doesn't seem to be working.
I followed Google's sample code , but to no avail. My code is below. The attempt to style the map starts at line 132. The comments are just helpful hints for me, since I'm just getting my feet wet in JavaScript and Fusion Tables API.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas { width:800px; height:600px; }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer;
var cz = {
center: new google.maps.LatLng(40, -95),
zoom: 4
};
var locationColumn = 'geometry';
var tableRegion = 4437529;
var mapStyle = [
{
featureType: 'all',
elementType: 'all',
stylers: [
{ saturation: 99 }
]
},
{
featureType: 'road.highway',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.arterial',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'road.local',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.country',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.locality',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.neighborhood',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'administrative.land_parcel',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'poi',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
},
{
featureType: 'transit',
elementType: 'all',
stylers: [
{ visibility: 'off' }
]
}
];
var map_options = {
center: cz["center"], //Accesses the 'center' property of the 'cz' object
zoom: cz["zoom"], //Accesses the 'zoom' property of the 'cz' object
mapTypeId: google.maps.MapTypeId.ROADMAP, //Type of map.
zoomControlOptions: { //control options for the 'zoom' action of Google Maps
style: google.maps.ZoomControlStyle.SMALL, //Makes the zoom function on the upper-left-side of Google Maps small -- instead of a scale-like thing, it's just a plus and minus
position: google.maps.ControlPosition.LEFT_CENTER //Puts Zoom function center-left
},
streetViewControl: false, //Turns off Street View option
panControl: false, //turns off the circular pan button in nupper-left
mapTypeControl: false //Turns off 'MAP/SATELLITE' option in upper-right
};
var locationQuery = {
select: locationColumn,
from: tableRegion
};
function initialize() {
//new Google Map with the 'map_options'
map = new google.maps.Map(document.getElementById('map-canvas'), map_options);
//Styles the map so it removes roads, saturates things, etc. See 'mapStyle'
var style = mapStyle;
var styledMapType = new google.maps.StyledMapType(style, {
map: map,
name: 'Styled Map'
});
map.mapTypes.set('map-style', styledMapType);
map.setMapTypeId('map-style');
//Makes the Fusion Tables layer, querying the polygon location info
layer = new google.maps.FusionTablesLayer({
query: locationQuery,
//Here's where I try setting the colors and conditions for my map. Doesn't work.
styles: [{
polygonOptions: {
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
},{
where: "price > 200",
polygonOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.5
}
}]
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
2 answers
solution1
0 2012-06-30 10:54:26
You haven't stated what your exact problem is except it ain't working. Not very helpful. So I'm guessing. Your map worked fine for me. No problems. Try setting fillOpacity: 1 in the code below to see that it's working fine. By using .5 you are allowing the base map colors to blend with the FT layer colors.
styles: [{
polygonOptions: {
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
},{
where: "price > 200",
polygonOptions: {
fillColor: "#FFFF00",
fillOpacity: 0.5
}
}]
solution2
0 ACCPTED 2012-06-30 18:59:44
There may have been an issue with FusionTables. It didn't work for me either when I tried running it locally (I got the tiles with the dreaded "Data May Be Still Loading, Drag or refresh the page to find out"), when I finally got around to uploading a copy , it worked, but then it worked locally as well.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.