hacks/web/Google Maps

2009年02月28日

このエントリーをはてなブックマークに追加

答えはonunloadとonloadの順番だった

IE6だけ動かない現象に遭遇した。
色々なパターンで調査してみて、ようやく動くようになった。

▼修正前


window.onunload = GUnload();
window.onload   = foo();

▼修正後


window.onload   = foo();
window.onunload = GUnload();

IE6はデリケートなヤツだ。

続きを読む


編集
@hansode at 17:55|PermalinkComments(0)TrackBack(0)

2009年01月16日

このエントリーをはてなブックマークに追加

分かってしまえば簡単な事だった

何故かカスタムマーカーのアンカー範囲が狭い現象が起きていた。
下記、やりたかった事。

  1. GMapsを使い地図上にカスタムマーカーを設置
  2. マーカー画像(デフォルトマーカーより大きい画像)には写真を指定
  3. マーカーのリンク先を指定

何の問題もなく上手く行ったように思えていた。
しかし、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デフォルトマーカーよりも大きいカスタム画像をマーカーに使用する場合

サンプルコードをそのまま使い続けた事が一番の敗因。
リファレンスをよく読もう。


Google Maps Hacks 第2版 ―地図検索サービスをもっと活用するテクニック
Rich Gibson Schuyler Erle
オライリー・ジャパン
売り上げランキング: 93859



編集
@hansode at 12:05|PermalinkComments(0)TrackBack(0)

2008年10月20日

このエントリーをはてなブックマークに追加

思ったとおりに動いてくれない

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));
}

これで無事に解決した

続きを読む


編集
@hansode at 17:25|PermalinkComments(1)TrackBack(0)

2008年10月08日

このエントリーをはてなブックマークに追加

変更履歴

2008.10.08 19:45
  • ドラッグ&ドロップした場合に地図中心移動
  • 地図の左上、右下の位置情報追加
  • ズームレベルの変化追加

やりたい事

  • 住所検索するとマップを表示
  • マップ上のマーカーをドラッグ&ドロップ可能
    • マーカーが置かれているポイントの位置情報取得
    • マーカーが中心となるように地図を移動
  • 表示されている地図の右上と左上の位置情報取得
  • ズームレベルの変化

参考にしたページ

検証例

※rssリーダーでは地図が表示されません

マーカー位置情報
地図左上位置情報
地図右下位置情報
ズームレベル ->




編集
@hansode at 14:55|PermalinkComments(0)TrackBack(0)