GoogleMapの地図をStreetViewに対応

サラトガIT日記 > WebAPI > GoogleMapの地図をStreetViewに対応 GoogleMapの地図をStreetViewに対応

※実経験の記憶を頼りに自宅の PC 環境(VMWareなど)で再現している内容もあるのでご注意下さい

2008-08-07

 

航空写真のように、ストリートビューのコントロールボタンを地図の右上に表示したかったのですが API が見つからず断念。平日の夜だし時間もないので、下記のサイトを参考に、ランチページなどの地図をストリートビューに対応してみました。

・[to-R]Google Map API にStreet View Objectsが追加

上記のサイトのサンプルを少しだけ変更して、地図の水色部分をクリックすると、地図を消してストリートビューが表示されるようにしました。地図に戻れないのが残念ですが、その内ボタン切り替え対応しようと思います。既存のソースに追加した箇所を書いておきます。

既存のソースは省略しますが、ランチページなどで html のソースを見ればわかりますのでそちらを参考にして下さい。珍しく IE で確認してみたら表示されない(FireFoxでは確認済)苦手な JavaScript の領域に踏み込むんじゃなかった・・・orz
(調整したら内容も修正します)

[Google]
ストリートビューのAPI

[追記]
IE で表示されない問題は IE の Flash 用の ActiveX が
入ってなかったという初歩的なオチ。
IE 全然使ってなかったからマッサラだったのね・・・。

function init() {

    (省略)

    // GMap2 インスタンスの addOverlay メソッドに
    // GStreetviewOverlay のインスタンスを渡す
    svOverlay = new GStreetviewOverlay();
    map.addOverlay(svOverlay);

    // リスナーに追加
    GEvent.addListener(map, 'click', function(objOverlay, objPoint) {
        add_Streetvie(objPoint)
    })
}

// リスナーから呼ばれるメソッドはほぼコピーして利用
// getElementById の引数をマップの div タグの id に合わせる
var add_Streetvie = function(objPoint) {

    (省略)

    document.getElementById("map")

    (省略)

}

関連記事

上記の記事に関連する記事(最新の10件)です。