Googleストリートビューやインドアビューをサイトに埋め込んで、表示させる方法をご紹介します。
やり方はGoogleマップと同様で、Googleストリートビューやインドアビューも、サイトに埋め込むことができます。
使い方は簡単で、ストリートビューやインドアビューのhtmlコードをコピーして貼り付けるだけです。
平面の地図だけではわからない実際の町並みや風景も、Googleストリートビューのパノラマ画像を付けて紹介すれば一目で理解してもらえます。
また、ストリートビューは外の画像だけでなく、お店や施設内部をパノラマ画像で見ることができるインドアビューも埋め込み可能です。
Googleマップの埋め込み方法は以下の記事をご覧ください。
参考記事 Googleマップの地図をホームページやブログに埋め込む方法
Googleストリートビュー 埋め込み位置を指定
では、Googleストリートビューの埋め込み方法をご紹介します。まずはGoogleマップを開いて、表示させたい場所や施設を指定します。
Googleマップ上でその場所を表示、または検索窓から場所や店舗、施設を検索します。
目的の場所や施設が表示されたら、右下にあるオレンジ色の人型アイコンをクリックします。
表示させたい位置をクリックして画像を表示させます。ストリートビューは青い線、360°写真は青い丸が目印で、カーソルを当てるとプレビュー画像が表示されます。
大きな施設の場合は、地図を拡大すると細かい部分まで見えるようになります。
指定した位置のストリートビューが表示されました。ビューの画像は360°写真なので上下左右に動かしたり、マウスホイール or 右下の +- ボタンで拡大することができます。
ストリートビューの位置を変更するときは、左下の地図を使うか、画像内に表示されているアイコンをクリックします。左上の矢印アイコンで最初の地図に戻ります。
埋め込みhtmlコードを取得
画像の位置が決まったら、左上のメニューから「画像を共有または埋め込む」を選びます。
共有から「地図を埋め込む」タブをクリックします。
埋め込み用のストリートビューが実寸大のサイズで表示されるので、「HTMLをコピー」をクリックして埋め込みコードをコピーしてください。地図内の矢印をクリックすると、表示位置を変更することができます。
地図内に表示される「この地図は自分専用です」という説明は無視でOKです。表示範囲の確認で邪魔になるなら消しましょう。
HTMLコード左横のメニューから埋め込む画像のサイズを変更できます。サイズは「小 400 × 300」「中 600 × 450」「大 800 × 600」「カスタム」の4種類から選べます。
カスタムサイズを選ぶと、地図のサイズを自分で指定できます。「実サイズでプレビュー」から、実際に表示される地図サイズを確認できます。
埋め込みコードの貼り付け
あとは表示させたいページにコピーしたhtmlコードを貼り付けてください。
以下はhtmlコードを貼り付けて表示させたストリートビューです。実際に動かしてみてください。
レスポンシブ対応のサイトであれば、スマホやタブレットの幅に合わせて画像の大きさを調整してくれますが、横にはみ出る場合はコードを修正してください。
インドアビューの埋め込み
Googleストリートビューは外部の町並みや風景だけでなく、店舗や施設内部のインドアビューも用意されています。もちろん、この画像も埋め込み可能です。
ビルやデパートのような高層建築物であれば、各階ごとのインドアビューもありますよ。
例えば「東京スカイツリー」で検索すると、右側に階層が表示され、各フロアごとの地図やインドアビューを見ることができます。
埋め込み方法はストリートビューと同じです。表示させたいインドアビューの画像を選び、htmlコードをコピーして画像を埋め込んでください。
「地図を埋め込む」を選び、「HTMLをコピー」してサイトに貼り付けてください。
実際に東京スカイツリーのインドアビューを、このブログに埋め込んでみました。まるで現場にいるような展望で、内部の様子がよくわかります。
ストリートビューを埋め込んで活用
Googleマップのストリートビューやインドアビューを使うと、外部の町並みや風景だけでなく、店舗や施設内部の様子がよくわかります。
画像の埋め込みも簡単で、地図のサイズを決めたらhtmlコードをコピーして貼り付けるだけです。利用はもちろん無料、慣れれば1分もかかりません。
紹介したいお店や名所、施設があれば、ぜひストリートビューやインドアビューをサイトに埋め込んで活用してみてください。
Googleストリートビューをスマホで見る方法は、以下の記事で紹介しています。
