Google map with two Fusion Table layers does not display second layer

Question

I have a map that is displaying two fusion table layers. I have styled them both using the styleId attribute to take the styles defined in the Fusion Table UI instead of using the styles attribute when creating the layer in Google maps. From the maps docs, it mentions that you can have up to 5 fusion table layers, with one of them being styled.

Styles can only be applied to a single Fusion Tables layer per map. You may apply up to five styles to that layer.

What I'm not 100% clear on is if this applies to inline styles only, e.g.:

layer1 = new google.maps.FusionTablesLayer({
  query: {
    from: table1Id
  }, 
  styles: [
    {markerOptions: {iconName: 'red_blank'}, where: 'age > 50'},
    {markerOptions: {iconName: 'grn_blank'}, where: 'age <= 50'}
  ]
});

layer2 = new google.maps.FusionTablesLayer({
  query: {
    from: table2Id
  },
  styles: [  // This won't work because you can only style one table inline
    {markerOptions: {iconName: 'red_blank'}, where: 'age > 50'},
    {markerOptions: {iconName: 'grn_blank'}, where: 'age <= 50'}
  ]
});

or if it also applies to styles defined in the fusion table UI:

layer1 = new google.maps.FusionTablesLayer({
  query: {
    from: table1Id
  }, 
  options: {
    styleId: 2,   // Obtained from the fusion table UI
    templateId: 1 // Obtained from the fusion table UI
  }
})

layer2 = new google.maps.FusionTablesLayer({
  query: {
    from: table2Id
  }, 
  options: {
    styleId: 2,   // Obtained from the fusion table UI
    templateId: 1 // Obtained from the fusion table UI
  }
})

From my reading of the docs, it would seem that it's only the first type that is not allowed on multiple layers.

The styleId way of styling a table is actually not mentioned in the Google Maps docs, but this is the way the embed code generated in Fusion Tables when you "Publish" a map looks like, and it actually works for individual layers.

If I enable both layers (layer1.setMap(map)), only one of the layers gets displayed. If I disable a layer, the other one appears correctly.

Any help will be greatly appreciated.

do you really use the same variable-name "layer" for both layers? variable-names may not be shared, 1 layer will overwrite the other layer. — Dr.Molle
No, I use different variables. I was just illustrating the two syntaxes I've used. I'll update the examples for clarity — Ruy Diaz

Dr.Molle Dr.Molle · Accepted Answer · 2013-11-29T04:13:46

It works with mixing inline-styles and styleId.

Demo with 5 layers, 4 layers use styleId and 1 layer uses 5 inline-styles , as you see the result is as expected 9 different styled markers: http://jsfiddle.net/doktormolle/Zk2CE/

The problem with your attempt: you are always using the same where-clause in the query(currently there is no where-clause, all rows will be selected).

When you define a where-clause in a style this will apply the style to the selected items, to all other items(that will not be matched by any where-clause in a style) the default-style will be applied(e.g. a red dot for a marker)

The result: when specific rows(items) will be selected by the query of more than 1 layer, only 1 style/styleId may be applied to these items(usually the style set with the last layer that has been added to the map).

Google map with two Fusion Table layers does not display second layer

1 Answers