Question

I’m reading an array of polygons onto a Google Map using kml in a fusion table. I have an array of 4 colors, and I’d like to programmatically color the polygons one of those 4 colors, depending on the values in another array.

Somehow, the map only colors 4 polygons at a time, even when I specify that there are only 4 styles. How can I color all 130 polygons?

Here is my code:

function setInitialStyles() {
layer = new google.maps.FusionTablesLayer({
      map : map,
      query : {
        select : "geometry",
        from : "1gwSN6n_00uZ7YuAP7g4FiUiilybqDRlRmWJrpvA"
      }
    });

var options = {
      styles : [
      {
        polygonOptions:
        {
            fillColor: "#ffffff",
            strokeColor: "#bcbcbc",
            fillOpacity: ".75"
        }
    }
    ]
    };

var styles = [];

var style1 = candColor[0];
var style2 = candColor[1];  
var style3 = candColor[2];  
var style4 = candColor[3];  

for (var i=0;i<countyCodes.length; i++) {
  var c = countyCodes[i];
  var whereClause = "'COUSUBFP' = " + c;
  var myStyle;
  if (countyColors[i] == "#0D58A6" ) { myStyle = style1; }
  if (countyColors[i] == "#981400" ) { myStyle = style2; }
  if (countyColors[i] == "#E3D132" ) { myStyle = style3; }
  if (countyColors[i] == "#007F37" ) { myStyle = style4; }

  options.styles.push({
          where: whereClause,
          polygonOptions: {
            fillColor: myStyle
          }
    });

}


 layer.setOptions(options);
}

Answer 1

You can’t. Currently FusionTablesLayer is limited to one styled layer, which may have up to five applied styles. See the documentation about the limitation of FusionTablesLayer.

You can define general styling rules (like WHERE clauses) that are applied to all of your polygons. But again: you can only define 5 such rules.

layer = new google.maps.FusionTablesLayer({
  query: {
    select: 'geometry',
    from: '1gwSN6n_00uZ7YuAP7g4FiUiilybqDRlRmWJrpvA'
  },
  styles: [{
    polygonOptions: {
        fillColor: "#ffffff",
        strokeColor: "#bcbcbc",
        fillOpacity: ".75"
    }
  }, {
    where: "population < 1000",
    polygonOptions: {
      fillColor: "#0000FF"
    }
  }, {
    where: "population > 10000",
    polygonOptions: {
      fillOpacity: 1.0
    }
  }]
});
layer.setMap(map);