Google Maps Api を使用して、フュージョン テーブルから大量のデータを読み込んでいます。以下のコードを使用して、データをレイヤーとしてマップに追加しています (関係のないコードは省略されています)。
function initialize() {
var tableId = 'xyxyxyxyxyxyxyxyxy';
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(51.522416,-0.11673),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var layer = new google.maps.FusionTablesLayer();
google.maps.event.addDomListener(
document.getElementById('checkbox_id'),
'click',
function() { filterMap(layer, tableId, map); }
);
}
function filterMap(layer, tableId, map, generated) {
var the_where_query = generate_where()
layer.setOptions({
query: {
select: 'geometry',
from: tableId,
where: the_where_query
},
options : {suppressInfoWindows:true}
});
}
私の問題は、チェックボックスのクリックとマップに表示されるデータの間に大きなギャップがあることです。どうにかしてイベントをリッスンできるようにしたい
- ユーザーがチェックボックスをクリックしたときに読み込み中の div 要素を表示する
- layer.setOptions が返されたら、読み込み中の div 要素を非表示にします。
div で DOM の作業を行う方法を理解していますが、クエリが Fusiontable ルックアップから返されたかどうかを判断する良い方法を見つけることができないようです (1 ~ 2 秒かかる場合があります)。