Home/ Questions/Q 8357651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T10:32:55+00:00

Can anyone explain why the gradient isn’t working for the map below? <!DOCTYPE HTML

  • 0

Can anyone explain why the gradient isn’t working for the map below?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Riks.txt - Google Fusion Tables</title>
<style type="text/css">
 html, body, #map_canvas {
   margin: 0;
   padding: 0;
   height: 100%;
 }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.7&amp;sensor=false">

</script>
<script type="text/javascript">
function initialize() 
{
  map = new google.maps.Map
  (document.getElementById('map_canvas'), 
  {
    center: new google.maps.LatLng(59.53726545292721,18.12209266712103),
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer({
    map: map,
    heatmap: { enabled: false },
    query: {
      select: "MP",
      from: "1TlGuMJwdZy-75LQvyEEq6GrvDob2LRREWI60Ji4",
      where: ""
    },

styles: [
  {
    styleId: 2,
    polygonOptions: {
      fillOpacity: 1,
      fillColorStyler: {
        expression: "MP",
        min: 0,
        max: 100,
        gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000']
      },
      strokeWeight: 1,
      strokeOpacity: 0.3,
      strokeColor: '#000000'
    }
  }
]

});



  layer.setOptions({
    styleId: 2,
    templateId: 0
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script></head>
<body><div id="map_canvas"></div></body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I coulnd’t find the syntax to dynamically apply a gradient (from where do you have your example?). There is a description of the styles that are returned by Fusion Tables, but the syntax of the returned style doesn’t seem to work. So my guess is, that it’s not (yet?) possible to do.

    But, if it’s not important for you to do this dynamically, you can define the gradient in the Fusion Tables Web UI:

    Define a map style with the Fusion Tables web UI

    If you want to create several styles, you can add multiple maps. To do so, you have to switch to the switch to the new look (see the link in the web ui in the upper right corner “Switch to new look”). Then you can add a new map using the “+” button:

    Add another map to a Fusion Table

    If you specified all the styles you need in the web UI, you can start to use them in FusionTablesLayer like that (I made a copy of your table to test that):

    layer = new google.maps.FusionTablesLayer({
    map: map,
    query: {
        select: "MP",
        from: "1oCgiRAPUPp638T1XJlR98IGLMIdhHQiyR-IY85E",
        where: ""
    },
    styleId: 2
});

    styleId 1 is the default, then 2 is the first one you added, 3 the second and so on. I created 2 styles for my copied table.

    Here is the example on jsFiddle to try out: http://jsfiddle.net/odi86/gPjE3/

    Just change styleId: 2 (gradient on column MP) to styleId: 3 (gradient on column M) and see what happens.

    I hope this helps.

    • 0