複数のFusion Tablesを一つの地図上に重ねて表示する。

残念ながら、Fusion Tablesは廃止されることになりました。

Notice: Google Fusion Tables Turndown – Fusion Tables Help

下記は群馬県のバスルートデータとバス停留所データのFusion Tablesを重ねて表示した例。

example

以前も紹介したことがあるFusion Tables。手軽に地理情報の視覚化が行えて非常に便利なのですが、Googleドライブの中では基本一つの地図に１種類のデータしか表示できません。

Google Maps APIコードエクスポート機能を使うと、複数のFusion Tablesを組み合わせて使うことができます。

サンプル

Google Maps APIコード出力

「Tools」メニューから「Publish」を選択し「Get HTML and JavaScript」をクリックするとGoogle Maps APIコードが取得できます。
Fusion Tablesエクスポート

出力されるコードにはGoogle Mapsの初期化などが含まれますが、Fusion Tablesを表示しているのは以下の部分となります。

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

layer = new google.maps.FusionTablesLayer({

map: map,

heatmap: { enabled: false },

query: {

select: "col6",

from: "1jKSH39amF5BDFE0YZBJn0KZZPeX8oOMKpuwu0X1F",

where: ""

options: {

styleId: 2,

templateId: 2

}

});

google.maps.FusionTablesLayerで指定したFusion Tablesを生成しGoogle Maps上に表示しているわけですが、この部分をコピペして一つのGoogle Mapsに追加すれば複数のFusion Tablesを１つの地図上に重ねて表示できます。
（一部webixを使ってます。divエレメントを生成しているだけです。)

webix.ui({
    rows:[
        {css: "header",template:"群馬県バス停留所", height:35 },
        {css:"map_view", template:' <div id="googft-mapCanvas"></div>'},
        {css:"footer", template:"@_shimizu", height:35 },
    ]
}).show();
 
 
 function initialize() {
    google.maps.visualRefresh = true;
    var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||
      (navigator.userAgent.match(/(iPod|iPhone|iPad|BlackBerry|Windows Phone|iemobile)/));
    if (isMobile) {
      var viewport = document.querySelector("meta[name=viewport]");
      viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');
    }
    var mapDiv = document.getElementById('googft-mapCanvas');
    
    var style_array_from_above_here =  [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}];
    var map = new google.maps.Map(mapDiv, {
        center: new google.maps.LatLng(36.322356, 139.013057),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: style_array_from_above_here
    });
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

    
    //バスルートデータのFusion Tablesを表示
    var buss_route = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: { enabled: false },
        query: {
            select: "col8",
            from: "1x3vlOo5wVXoMjsbS3sRT75LdSZ4KMeo5JGMNKGeQ",
            where: ""
        },
        options: {
            styleId: 2,
            templateId: 2
        }
    });
    
    //バス停留所データのFusion Tablesを表示 
    var buss_stop = new google.maps.FusionTablesLayer({
        map: map,
        heatmap: { enabled: false },
        query: {
            select: "col6",
            from: "1jKSH39amF5BDFE0YZBJn0KZZPeX8oOMKpuwu0X1F",
            where: ""
        },
        options: {
            styleId: 2,
            templateId: 2
        }
    });

    
    if (isMobile) {
        var legend = document.getElementById('googft-legend');
        var legendOpenButton = document.getElementById('googft-legend-open');
        var legendCloseButton = document.getElementById('googft-legend-close');
        legend.style.display = 'none';
        legendOpenButton.style.display = 'block';
        legendCloseButton.style.display = 'block';
        legendOpenButton.onclick = function() {
            legend.style.display = 'block';
            legendOpenButton.style.display = 'none';
        }
        legendCloseButton.onclick = function() {
            legend.style.display = 'none';
            legendOpenButton.style.display = 'block';
        }
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);

webix.ui({

rows:[

{css: "header",template:"群馬県バス停留所", height:35 },

{css:"map_view", template:' <div id="googft-mapCanvas"></div>'},

{css:"footer", template:"@_shimizu", height:35 },

]

}).show();

function initialize() {

google.maps.visualRefresh = true;

var isMobile = (navigator.userAgent.toLowerCase().indexOf('android') > -1) ||

if (isMobile) {

var viewport = document.querySelector("meta[name=viewport]");

viewport.setAttribute('content', 'initial-scale=1.0, user-scalable=no');

}

var mapDiv = document.getElementById('googft-mapCanvas');

var style_array_from_above_here = [{"featureType":"water","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":-78},{"lightness":67},{"visibility":"simplified"}]},{"featureType":"landscape","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"geometry","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"simplified"}]},{"featureType":"poi","elementType":"all","stylers":[{"hue":"#ffffff"},{"saturation":-100},{"lightness":100},{"visibility":"off"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"hue":"#e9ebed"},{"saturation":-90},{"lightness":-8},{"visibility":"simplified"}]},{"featureType":"transit","elementType":"all","stylers":[{"hue":"#e9ebed"},{"saturation":10},{"lightness":69},{"visibility":"on"}]},{"featureType":"administrative.locality","elementType":"all","stylers":[{"hue":"#2c2e33"},{"saturation":7},{"lightness":19},{"visibility":"on"}]},{"featureType":"road","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":31},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"hue":"#bbc0c4"},{"saturation":-93},{"lightness":-2},{"visibility":"simplified"}]}];

var map = new google.maps.Map(mapDiv, {

center: new google.maps.LatLng(36.322356, 139.013057),

zoom: 14,

mapTypeId: google.maps.MapTypeId.ROADMAP,

styles: style_array_from_above_here

});

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open'));

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend'));

//バスルートデータのFusion Tablesを表示

var buss_route = new google.maps.FusionTablesLayer({

map: map,

heatmap: { enabled: false },

query: {

select: "col8",

from: "1x3vlOo5wVXoMjsbS3sRT75LdSZ4KMeo5JGMNKGeQ",

where: ""

options: {

styleId: 2,

templateId: 2

}

});

//バス停留所データのFusion Tablesを表示

var buss_stop = new google.maps.FusionTablesLayer({

map: map,

heatmap: { enabled: false },

query: {

select: "col6",

from: "1jKSH39amF5BDFE0YZBJn0KZZPeX8oOMKpuwu0X1F",

where: ""

options: {

styleId: 2,

templateId: 2

}

});

if (isMobile) {

var legend = document.getElementById('googft-legend');

var legendOpenButton = document.getElementById('googft-legend-open');

var legendCloseButton = document.getElementById('googft-legend-close');

legend.style.display = 'none';

legendOpenButton.style.display = 'block';

legendCloseButton.style.display = 'block';

legendOpenButton.onclick = function() {

legend.style.display = 'block';

legendOpenButton.style.display = 'none';

}

legendCloseButton.onclick = function() {

legend.style.display = 'none';

legendOpenButton.style.display = 'block';

}

google.maps.event.addDomListener(window, 'load', initialize);

FusionTablesLayerのsetQueryメソッドを使って表示するデータの絞り込みなども行えるのですが、それについてはまた後日書きます。

サンプル

Google Maps APIコード出力

投稿者: shimizu