ラベル Google Maps API v3 の投稿を表示しています。 すべての投稿を表示
ラベル Google Maps API v3 の投稿を表示しています。 すべての投稿を表示

2010年6月6日日曜日

StreetViewのReferenceにないイベントを拾う ~ Google Maps API v3

Google Maps API v3に変わり、以前のようにStreetViewを使うために自前でゴリゴリとPegmanの挙動やら何やらを制御してやる必要がなくなったわけだが、それにあわせてイベントの種類も減ってしまったように見える(あくまでReference的な意味で)。

というのも、StreetViewPanoramのEvents項目を見ると、そこにはcloseclickしか載っていない。

これではいつMapがStreetViewモードに切り替わったかなどのイベントが拾えないじゃないか、と思いつつもデバッグ時にStreetViewPanoramのインスタンスを掘り下げてみたらReferenceに載っていないイベントがたくさん見つかった。なので、今回はそのうちの一例を紹介しようと思う。下記の例はgoogle.maps.StreetViewPanoramaの表示・非表示が切り替わったイベントをハンドルしている。これは、MapのほうでPegmanを地図上に落とした場合などにも呼ばれるイベントなので、Mapの動作に併せてStreetViewPanoramaの挙動を変えたいときに重宝するイベントだ。

var map = new google.maps.Map("省略");
var point = new google.maps.LatLng("省略");
var panoramaOptions = {
        position: point,
        pov: {
            heading: 34,
            pitch: 10,
            zoom: 1
        }};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("streetview"), panoramaOptions);
map.setStreetView(panorama);
google.maps.event.addListener(panorama, "visible_changed", function () {
  alert(panorama.getVisible() ? "StreetView見えてる" : "StreetView見えてない");
});

IE8でStreetViewを表示すると描画がおかしくなる ~ Google Maps API v3

ASP.NETでホストしているサイトで、Google Maps API v3を使用し、IE8でStreetViewを表示すると下図のように描画が崩れてしまう。


一見分からないかもしれないが、画面中央に表示されるべき矢印が画面左側に寄ってしまっている。ちなみにFF、Chromeで表示すると下図のように正しく描画される。


この現象はgoogle.maps.Mapとgoogle.maps.StreetViewPanoramaに分けてStreetViewを実装しているのでまだこの程度で収まっているが、google.maps.MapにStreetViewの描画を任せている場合はその崩れ具合が悪化する。

ちなみに上記の問題を引き起こしているのは下記のタグだ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

このタグがあるとStreetViewが正しく描画されないようだ。が、これがないとIE8ではCSSの描画が崩れるという問題があった。何か解決方法がないものか、と思いつつも面倒なのでとりあえず一旦休止。

Google Maps APIのV2をV3へ移行する

Google Maps APIのv2が先月正式に非推奨になったのでwww.my-clip.netのAPIをv3へと移行した。v3になったことで大幅に変わった箇所がいくつかあるので下記に列挙しておく。

・API Keyはいらない
v2までは必須だったAPI Keyはもう必要ない。下記のようにVersionを含まないUrlをScriptタグのソースに指定すれば常に最新のライブラリが参照できるようになっている。
http://maps.google.com/maps/api/js?sensor=true_or_false

・google.maps名前空間の導入
v2まではグローバル空間にGMap2、GMarker、GPolyLineというクラスが配置されていたが、v3からはそれぞれgoogle.maps.Map, google.maps.Marker, google.maps.Polylineとなっている。これにあわせていくつかメソッドやプロパティも変更されているので注意するように。
例1:GMarker.getLatLng() → Marker.getPosition()
例2:GeocoderClient.getLocations() → Geocoder.geocode()
(GeocoderはCallbackメソッドのシグネチャと返却される値の構造が変わっているので要注意)

・GBrowserIsCompatible()、GUnload()がない
Referenceで明示的に廃止されたとは記述されていないけれど、Referenceに記述がないのとForumなどの他のユーザーからの報告をもとに類推すると現状上記二つのメソッドに対応するものはない

・StreetViewのサポート
StreetViewの導入がしごく簡単になった。google.maps.MapクラスがStreetViewをサポートするので、Mapクラスの初期化時にオプションでstreetViewControl: trueを渡してやるだけでStreetViewが使用できるようになる。詳細はここに載っているサンプルコードを参照してもらいたい。


クラスの配置場所が変わっているので移行作業が大変そうに映るが思ったよりも大変ではなかった。