MULTISOUP

MULTISOUP

MULTISOUP

Staff Blog

Introduction example

2016.09.20

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

20160920

みなさん、こんにちは。

 

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

【関連記事】こんな記事も読まれています

2016.06.22

山梨県立富士山世界遺産センター公式アプリ「ふじめぐり」

みなさん こんにちは!

本日(6/22)、山梨県立富士山世界遺産センターが開館しました!

今回は富士山世界遺産センターと「・・・

続きを読む

2017.05.26

日光いろは坂で「Roads API」を使ってみたら・・・

みなさん、こんにちは。

先日開催した「Google Maps 活用セミナー」には、多数のご来場ありがとうございました。

 ・・・

続きを読む

2017.03.17

時差計算ができるGoogle Maps Time Zone API の利用方法を・・・

みなさん、こんにちは。

 

Google Maps API で最後まで紹介できていなかった「続きを読む

 - Google Maps APIs, Google Maps JavaScript API, StreetView, スタッフ日記

お問い合わせお見積もりから開発のご相談まで、お気軽にお問い合わせください。

(※)は入力必須項目です。

当社では、お客様がお問い合わせの際に必要な個人情報または、 お問い合わせ内容等につきましては、
お問い合わせの回答の目的のみに利用します。

Google Maps for Work™に関するご質問やお見積りは、
マルティスープまでお気軽にお問い合わせください03-3518-9013 (受付時間:平日 9:00−18:00)