fusion table google maps infowindow特定の列を返す

Question

私はfusion tableを使って、ポリゴン（区域線）のレイヤーをjavascriptのGoogleマップに追加しています。しかし、マップ上のポリゴンをクリックすると、現在デフォルトで表示されているすべての列の値ではなく、特定の列が表示されます。

ここに私のコードですが、私はいくつかの位置情報を返すようにしました。デフォルトの情報ウィンドウは無効です。だから、クリックイベントの中で、どのようにフュージョンテーブルを参照していますか？

layer = new google.maps.FusionTablesLayer({ 
    suppressInfoWindows: true, 
    query:{ 
     from:tableid, 
     select: 'geometry' 
    }, 
    styles:[{polygonOptions:{fillOpacity:0.01}} 
    ], 
    options: { 
     styleId: 2, 
     templateId: 2 
    }}); 
    layer.setOptions({query:{select:'geometry', 
        from: tableid}}); 
    layer.setMap(map); 

google.maps.event.addListener(layer, 'click', function(event) { 
alert(event.latLng.lat() + ", " + event.latLng.lng()); 
}); 

私の融合テーブルにはIDという名前の列があります。ポリゴンをクリックすると、ID番号が表示されます。

はこれを実行しようとしましたが、何も現れません：

e.infoWindowHtml = "ID" + e.row['ID'].value; 

感謝を。

Answer 1

FusionTablesMouseEventには、クリックされたポリゴンを含むテーブルの行への参照が含まれています。

google.maps.event.addListener(layer, 'click', function(event) { 
    infoWindow.setContent(event.row["ID"].value); 
    infoWindow.setPosition(event.latLng); 
    infoWindow.open(map); 
}); 

proof of concept fiddle (this table doesn't contain a column ID, but the column "name" shows the concept)

コードスニペット：

var tableid = "1foc3xO9DyfSIF6ofvN0kp2bxSfSeKog5FbdWdQ" 
 
var infoWindow; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 3, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    infoWindow = new google.maps.InfoWindow(); 
 
    layer = new google.maps.FusionTablesLayer({ 
 
    suppressInfoWindows: true, 
 
    query: { 
 
     from: tableid, 
 
     select: 'geometry' 
 
    }, 
 
    styles: [{ 
 
     polygonOptions: { 
 
     fillOpacity: 0.01 
 
     } 
 
    }], 
 
    options: { 
 
     styleId: 2, 
 
     templateId: 2 
 
    } 
 
    }); 
 
    layer.setOptions({ 
 
    query: { 
 
     select: 'geometry', 
 
     from: tableid 
 
    } 
 
    }); 
 
    layer.setMap(map); 
 

 
    google.maps.event.addListener(layer, 'click', function(event) { 
 
    console.log(event.row["name"].value); 
 
    console.log(event.latLng.toUrlValue(6)); 
 
    infoWindow.setContent(event.row["name"].value); 
 
    infoWindow.setPosition(event.latLng); 
 
    infoWindow.open(map); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>