マルティスープ
Staff Blog

2016.09.20

Google Maps と 360°パノラマ画像の連携

みなさん、こんにちは。

Googleマップにあるストリートビューの機能ですが、カスタマイズすれば自分が撮影したパノラマ画像をストリートビュートと同じような形で地図上に表示することが可能です！

例えば、以下のような用途のときに使えるのではないでしょうか？

試しにマルティスープ社内のパノラマ画像を表示したサンプルをお見せします。パノラマ画像は、リコーの「THETA S」を使用して撮影したものです。地図上のカメラアイコンをクリックすると、その場所のパノラマ画像が表示されます。

また、ストリートビュー内の矢印をクリックすると、次のパノラマ画像へ遷移もできます。

Full Screen

ストリートビューを表示するときは、StreetViewPanorama クラスを用います。

var pano= new google.maps.StreetViewPanorama(
  "panorama-view", {
    pano: 1, //任意のID
    visible: true,
    pov: { heading:-23.248516450984027, pitch:-3.2288830857410757 }, //方向など
    panoProvider: {
      location: {
        pano: pano,
        description: "エントランス",
      },
      //リンク先の設定
      links: [{
        heading: 90,
        description: '受付',
        pano: 2
      }],
      copyright: '(C) 2016 MULTISOUP',
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(1024, 512),
        getTileUrl: function(pano, zoom, tileX, tileY){
          // パノラマ画像のURL
          return pano/sample.png'
        }
      }
    }
  }
);

以前は360°パノラマ画像を表示するとき、非常に大変な思いをしたものでしたが、今ではこんな簡単に表示できてしまいます。是非ご活用ください。