GoogleMapの地図をStreetViewに対応

GoogleMapの地図をStreetViewに対応

WebAPIGoogleMapの地図をStreetViewに対応

航空写真のように、ストリートビューのコントロールボタンを地図の右上に表示したかったのですが 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")

    (省略)

}

最終更新日:

関連記事

人気記事

新着情報