開発ブログ

ページメニュー

<< ドラクエ5のブログで使った主人公の名前を変更する処理 | main | 障害報告:お問い合わせページ >>

カレンダー

<< March 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>

  • グーグルマップストリートビュー(google maps street view)をいじってみる
  • グーグルマップストリートビューgoogle street view)をさっそくいじってみました。ここでは技術的な話に終始するので、それ以外の話はなかの人ブログで書いた話が参考になるかと思います。面白い風景を探してる方は、上記リンクか、こちらをご覧ください。

    さて、サービス自体がどんな感じか調査しようとgoogle map street view apiで検索すると、どこぞやのニュースにあった「…MappletはGoogle Gadget APIとGoogle Maps APIからなっているため、 これらのAPI利用者は簡単にMappletを作ることができるという…」という言葉をそのまま引用してるページが、じゃんじゃか出現。。引用はいいんだけど、おかげで肝心な情報にたどり着けないのは迷惑千万。

    こうなったら、いじってみれば何とかなるだろうということで、いろいろいじってみることにしました。先ずは初回なので簡単に。

    単純にiFrameの中に埋めこんでみます(単純にgoogle map street viewのリンクボタンで生成)

    大きな地図で見る


    ただ、iFrameだといろいろ制限があるしなぁ…と悩み、iFramesrcを直接開いてみるのはどうだろう、ということに。

    全画面になりました。

    でかい。これはこれで面白い。

    続いて、移動したストリートビューの座標値をとる作業。さすが日本版公開直後というのもあり、日本語の情報が非常に少ないです。仕方なく海外のAPIリファレンスをあちこち回って、ようやく下記アドレスにたどり着きました。
    Services - Google Maps API - Google Code(英語、外部リンク)

    ふむふむ…と、できたのが下記サンプル。
    グーグルストリートビュー(google maps street)の緯度・経度を取得する

    とりあえず、下記処理を実装してみました。

    1. ストリートビューを移動し、画面を切り替える都度、座標を取得

    2. 上の処理で取得した座標を地図の中心にする


    簡単なソースコードは以下。
    <script language="JavaScript"><!--
    function gmap_load(){
    //中心座標
    fenwayPark = new GLatLng(35.660992,139.701376);
    panoramaOptions = { latlng:fenwayPark };
    //オブジェクトの作成
    myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
    panoClient = new GStreetviewClient();
    //イベントの定義
    GEvent.addListener(myPano,"initialized",function(loc){
    //移動後の処理
    //alert("!"+loc.latlng)
    });
    }
    </script>
    <body onload="gmap_load">
    <div name="pano" id="pano" style="width: 500px; height: 300px"></div>
    いろいろできそうですから、面白いマッシュアップツールになるのではないでしょうか。

| 開発関連 | 08:24 | comments(0) | trackbacks(0) |


コメント

コメントする

この記事のトラックバックURL

http://blog.24th.jp/trackback/947254