Menu
This is my code below. For some reason, the only style that render properly are the stroke (it's white) and the opacity (set at 0.4). However, my gradient doesn't seem to load. Instead, it's all red. Why is this?
<html>
<head>
<meta charset="UTF-8">
<title>Customizing Fusion Tables map using Fusion Tables' Javascript API</title>
<style type="text/css">
#map-canvas {
height: 800px;
width: 800px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!-- Google Maps API -->
<script type="text/javascript">
var locationColumn = "geometry";
var tableId = "1FbzvoRkdJzXvIxMJg2mGYVz5Q1BW2-4feMolgVc"; // California Census Tracts FT
var condition = "'Median income (dollars)'>0";
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
function initialize() {
var geocoder = new google.maps.Geocoder();
var gmap = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: condition
},
styles: [
{
polygonOptions: {
strokeColor: "#ffffff",
strokeOpacity: 0.4,
strokeWeight: 1,
fillColorStyler: {
kind: "fusiontables#gradient",
columnName: "Median income (dollars)",
gradient: {
min: 28183.65,
max: 122762.9,
colors: [
{
color:"#990000",
opacity:0.4
},
{
color:"ffd966",
opacity:0.4
},
{
color:"#274e13",
opacity:0.4
}
]
}
}
}
}
]
});
geocoder.geocode(
{
'address':'California'
},
function(results,status){
var sw = results[0].geometry.viewport.getSouthWest();
var ne = results[0].geometry.viewport.getNorthEast();
var bounds = new google.maps.LatLngBounds(sw,ne);
gmap.fitBounds(bounds)
}
);
layer.setMap(gmap);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
304
Update 1
I did some more research. Unfortunately, this feature is not supported. Your code has new google.maps.FusionTablesLayer and there is no mention of gradients in the documentation. I recommend using my last solution (which works well) or the business demographics layer which does support gradients. The same conclusion was reached here: Gradient for Fusion Table Layer. So, to answer your question: no, you cannot create a gradient using Google Maps JavaScript-based API.
Update 0
I was able to accomplish the desired gradient using Google Maps JavaScript API v3: Layers. Specifically, I found a useful example in the Fusion Table Styles sub-section.
Working Example: http://jsbin.com/alahup/1/edit
Relevant Code
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: condition
},
styles: [{
where: "'Median income (dollars)' < 35000",
polygonOptions: {
fillColor: '#2EFEF7',
fillOpacity: 0.4
}
}, {
where: "'Median income (dollars)' > 34999.99 AND 'Median income (dollars)' < 65000",
polygonOptions: {
fillColor: '#2E9AFE',
fillOpacity: 0.4
}
}, {
where: "'Median income (dollars)' > 64999.99 AND 'Median income (dollars)' < 120000",
polygonOptions: {
fillColor: '#2E2EFE',
fillOpacity: 0.4
}
}, {
where: "'Median income (dollars)' > 119999.99",
polygonOptions: {
fillColor: '#0B0B61',
fillOpacity: 0.4
}
}]
});
Result
Here's a quick solution:
var layer = new google.maps.FusionTablesLayer({
query: {
select: locationColumn,
from: tableId,
where: condition
},
styleId: 2 // <-- replace current style code with this
});
Gradient for Fusion Table Layer has some more information about predefined styles. I'd look into that further.
Also, this example by Google looks to be nearly the same as what you are trying to accomplish. I'd review and use their code.
https://developers.google.com/fusiontables/docs/samples/adv_fusiontables
176
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
