2015年に実験的に試した内容。メモしておいた内容を今更ながら自分用メモとして投稿。
間違い等あったらごめんなさい。
markdown をイマイチよくわかってない。。。
条件
- 以下のfusion tableを利用する。
https://www.google.com/fusiontables/DataSource?docid=1oVouXsjBueThIMExCZh9LhYNVINnqIjzrnuc1fIT
※ 路線情報と駅名が登録されてある。詳細は GoogleMapsに路線を表示する を参照 - 変更する内容は、デフォルトでは InfoWindow で表示される内容は、クリック対象の fusion table に登録された内容すべてが表示される。（geometoryはデフォルトで外れている。。。なんでだ？） ここでは、事業者名、路線名、駅名のみを表示するよう変更する
- 表示確認は chorme のみ
対応内容
クリック対象のInfoWindowを変更する方法は、google.maps.event.addListener() で click イベントを登録し対応する
var map, layer;
function initialize() {
var center = new google.maps.LatLng(34.686871327463116, 135.52652215576177);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: center,
zoom: 11
});
layer = new google.maps.FusionTablesLayer({
query: {
from: "1oVouXsjBueThIMExCZh9LhYNVINnqIjzrnuc1fIT",
}
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(e) {
// Change the content of the InfoWindow
e.infoWindowHtml =
'事業者：' + e.row['company_name'].value + "" +
'路線：' + e.row['line_name'].value;
if( e.row['data_type'].value == 'station') {
e.infoWindowHtml += '駅名：' + e.row['station_name'].value;
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
参考サイト：
https://developers.google.com/fusiontables/docs/samples/change_infowindow_content
成果物
- 以下にすべて登録ずみ。
https://github.com/oya3/gis_analyze.git
- map_change_infowindow.html ... 表示サンプル
- 動作サンプル
http://oya3.net/map/map_change_infowindow.html