複数の地点情報があり、GoogleMapを表示したときに、そのGoogleMapの表示範囲のみの地点を取得して、マーカーを表示する。
というスクリプトを昔書いていて、うまく動いていたのですが、その地点が一瞬だけ表示して消えるという現象が起こるようになりました。
また、一旦ほぼ全地点を読み込んだあとだと表示されるという現象でもありました。
だいたい下記の流れで表示
・メイン地点を中心とした地図を表示
・メイン地点のマーカーを表示
・表示された地図の四方の緯度経度を取得
・その緯度経度の範囲内のマーカーの位置情報をxmlで取得
・xmlをajaxで読み込んでそのほかの地点として表示
地図を移動させたり拡大したりするたびに、表示された地図の四方の緯度経度を取得し……という流れを繰り返します。
表示範囲の地点を取得して、マーカーを表示させるイベントは下記のように書いていました。
[javascript]
google.maps.event.addListener(map, ‘idle’, function(){
setPoints();
});
[/javascript]
‘idle’という部分をいろいろと変えてみました。
最初は’bounds_changed’(地図のビューポート(見えている範囲)に変化があった時に発火)にしたのですが、なぜかこれだとマーカーが上書きされて、影がだんだん濃くなりました。
結局、’tilesloaded’(地図のタイルの読み込みが完了したタイミングで発火)を採用しました。
[javascript]
google.maps.event.addListener(map, ‘tilesloaded’, function(){
setPoints();
});
[/javascript]
仕様が変わったのか、ブラウザの解釈が変わったのか、そのあたりまでは調べていません。
上記について、参考にさせていただいたサイトは下記です。
https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/bounds_changed/
https://lab.syncer.jp/Web/API/Google_Maps/JavaScript/Map/tilesloaded/
どちらも「Syncer」というサイトです。ありがとうございました。
コメントを残す