Google Maps API v1からv2への移行

先日、Google Maps API version2が公開されました。変更点は、

  • オーバービュー地図表示の追加
  • 拡張性の高いGMap2クラスの追加
  • JavaScriptライブラリのサイズ軽減
  • メモリーリーク問題の解消
  • デバッグ情報表示機能の追加
  • 詳細な衛星写真を見られる範囲の拡大
  • 1日50万PV制限の撤廃

version1との互換性は、ほぼ保たれているようです。私の Moblog地図 でも、<script>タグの"v=1"を"v=2"にするだけで問題なく動いてしまいました。


これだけでは面白くないので、オーバービュー地図を表示するGOverviewMapControlとGMap2クラスを使ってみることにしました。基本的にGMapをGMap2に、Gpoint()をGLatLng()に置き換えるだけです。注意する点としては、GPoint()とGLatLng()で引数の順序が逆になっていること、Zoomレベルを示す値の大小が逆になっていることです。あとは、メソッドの名前がいろいろと変わっているので、これも注意しましょう( Google Maps API Version 2 Upgrade Guide参照 )。そして、GOverviewMapControlですが、デフォルトだとブラウザ画面の右下に表示されるようになっています。本家のGoogle Mapsだとそれでいいのですが、うちの場合は右側に表示されるMoblog地点のリストと重なってしまいます。なので、次のようにしてオーバービュー地図の位置を地図の右下に移動させました。

function positionOverview() {
    var map = document.getElementById("map");
    var omap = document.getElementById("map_overview");
    x = map.offsetLeft + map.clientWidth - omap.clientWidth;
    y = map.offsetTop + map.clientHeight - omap.clientHeight;
    omap.style.left = x+"px";
    omap.style.top = y+"px";
}

残念なことに、IEでは、このオーバービュー地図が表示されないようです。マーカーをクリックしたときの挙動も何か変だし、API v2はIEとあんまり相性が良くないのかな..



Leave a comment


:

:

:

:

このエントリーのはてなブックマーク (-)