hacks/web/Google Maps
2009年02月28日
IE6でGMapsを使う
|
|
|
答えはonunloadとonloadの順番だった
IE6だけ動かない現象に遭遇した。
色々なパターンで調査してみて、ようやく動くようになった。
▼修正前
window.onunload = GUnload(); window.onload = foo();
▼修正後
window.onload = foo(); window.onunload = GUnload();
IE6はデリケートなヤツだ。
オライリー・ジャパン
売り上げランキング: 147664
2009年01月16日
GIcon()で不用意にG_DEFAULT_ICONを指定してはいけない
|
|
|
分かってしまえば簡単な事だった
何故かカスタムマーカーのアンカー範囲が狭い現象が起きていた。
下記、やりたかった事。
- GMapsを使い地図上にカスタムマーカーを設置
- マーカー画像(デフォルトマーカーより大きい画像)には写真を指定
- マーカーのリンク先を指定
何の問題もなく上手く行ったように思えていた。
しかし、3のアンカーあたり判定が何故か狭い。
同じ症状の人が見当たらない
自分だけ…?
自分が検索してみ限りでは同じ症状の人を発見出来なかった。
カスタムマーカーだから当り判定が狭いんじゃないのだろうか。
そんな仮説が頭の中に浮かんだ。
しかし、、、
カスタムマーカーを使い、自分が実装したい事を実現させているサービスが存在した。
実装出来ないはずがない。
違和感を覚えた1行
改めてコードを見直してみると、下記1行が気になった。
var photoIcon = new GIcon(G_DEFAULT_ICON);
自問自答。
何故、「G_DEFAULT_ICON」を指定しているのか…。
var photoIcon = new GIcon();
ためしに「G_DEFAULT_ICON」指定をやめてみた。
するとどうだろう…
意図する動きになった！
まとめ
上記条件を満たす場合、
GIcon()には不用意にG_DEFAULT_ICONを指定してはいけない。
- カスタムマーカーを使う場合
- GIconデフォルトマーカーよりも大きいカスタム画像をマーカーに使用する場合
サンプルコードをそのまま使い続けた事が一番の敗因。
リファレンスをよく読もう。
オライリー・ジャパン
売り上げランキング: 93859
2008年10月20日
forループの中でGevent.addListenerを使う
|
|
|
思ったとおりに動いてくれない
forループ内で読んだGEvent.addListenerが意図した動作をしてくれない。
症状とコードは下記の通り。
- マーカーは作られる
- しかし、どのマーカーをクリックしても同一マーカーから情報窓が出てくる
for (var i = 0; i< loaddata.data.length; i++) {
var point = new GLatLng(data[i].lat, data[i].lng);
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + i);
});
map.addOverlay(marker);
}
※dataは連想配列の配列とする
解決策はクロージャにあり
検索してみたけど、同じ現象を解決したエントリを見つけられなかった。
APIのドキュメントを読んでいたら解決策を見つけた。
イベント リスナでクロージャを使用する
イベント リスナを実行するときは、オブジェクトにプライベート データと永続データの両方を添付することが一般に有効です。JavaScript は「プライベート」インスタンスデータをサポートしていませんが、内部関数が外部変数にアクセスすることを可能にするクロージャ をサポートしています。イベントリスナ内でクロージャを使用すると、イベントが発生したオブジェクトには通常添付されていない変数にアクセスできるので便利です。
次の例では、イベント リスナ内で関数クロージャを使用して、一連のマーカーにシーケンス番号値を割り当てています。各マーカーをクリックすると、そのマーカー自体には含まれていない個別の値が表示されます。
なるほど…
function createMarker(point, number) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker #" + number);
});
return marker;
}
for(var i = 0; i< loaddata.data.length; i++) {
var point = new GLatLng(data[i].lat, data[i].lng);
map.addOverlay(createMarker(point, i));
}
これで無事に解決した
オライリー・ジャパン
売り上げランキング: 49910
