How to use data from two Google Fusion tables?

Question

I'm trying to create a google map of "service areas" in USA & Canada, stumbled upon this fusion table layer stuff & thought it would work out great, but I am having problems.

1. I cannot create a fusion table & make it public without paying google, no way around that, I'll use existing public tables.

2. I need to apply styles to the fusion table layer, BUT I am loading 2 fusion tables (layers) & the API only allows styles to be added to one layer.

Here is my code:

  <script>
    function initMap() {
      // Styles a map in night mode.
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.237395466608156, lng: -93.68512878417971},
        zoom: 3.9,
        styles: []

      });

      var usa_geometry = new google.maps.FusionTablesLayer({
        query: {
          select: 'geometry',
          from: '1ZZ8j0NDbs2dilcQWjLh9xI7qIJso6DgYAoGTbA',
          where: "STATE IN ('North Dakota', 'Minnesota', 'Wisconsin', 'Ohio', 'Indiana', 'Iowa', 'Illinois', 'Kentucky', 'Missouri', 'Tennessee', 'Arkansas', 'Florida', 'Alabama', 'Mississippi', 'Louisiana', 'Texas', 'Oklahoma', 'Kansas', 'Nebraska', 'South Dakota')",
        },
        styles: [
          { 
            polygonOptions: {
            fillColor: "#006db7",
            strokeColor: "#006db7",
            fillOpacity: ".5",
          },
        }],

        map: map,
        suppressInfoWindows: true
      });

      var canada_geometry = new google.maps.FusionTablesLayer({
        query: {
          select: 'geometry',
          from: '1auwG6s4axorHR-QAX3UDXL544pSEXlbxmyu6xvJC',
          where: "Place IN ('Quebec', 'Ontario', 'Manitoba')",

        },
        styles: [
          { 
            polygonOptions: {
            fillColor: "#006db7",
            strokeColor: "#006db7",
            fillOpacity: ".5",
          },
        }],

        map: map,
        suppressInfoWindows: true
      });

    };

  </script>

So:

1. Is there a way to use the fusion table polygon data locally? i.e. export the CSV and load that?

2. Is there a way to load data from (join) 2 fusion tables in one map layer?

3. is there another option I am overlooking?

Answer 1

Is there a way to use the fusion table polygon data locally? i.e. export the CSV and load that?

Yes, a Fusion Table can be downloaded as KML, which you can use third-party apps/libraries such as toGeoJson to load in the app as GeoJSON.

Is there a way to load data from (join) 2 fusion tables in one map layer?

You'd have to merge the tables through the Fusion Tables UI into one Fusion Table and load that layer.

is there another option I am overlooking?

Yes, as the first part of your message is incorrect: "I cannot create a fusion table & make it public without paying google...."

You can create Public or Unlisted Fusion Tables without having to pay Google.

Also, when going to your created Fusion Table in the UI, selecting Tools->Publish and selecting "Get HTML and JavaScript", you'll see the following undocumented option "options" for the FusionTablesLayer:

layer = new google.maps.FusionTablesLayer({
  map: map,
  heatmap: { enabled: false },
  query: {
    select: "col12",
    from: "1ClpNLfPQnhEex1KvGg5FrHPgzXgSu1ZvFEL9a2l1",
    where: ""
  },
  options: {
    styleId: 2,
    templateId: 2
  }
});

You can use that options to override the default styling that the Javascript API applies and use the style you defined in the Fusion Tables UI.

Here is a simple sample JSBin showing the Fusion Table style defined in the Javascript for usa_geometry while the Fusion Table style defined in the Fusion Tables UI for canada_geometry: