Googleストリートビューの埋め込み方法

スポンサーリンク
スポンサーリンク

Googleストリートビュー埋め込み

Googleストリートビューをホームページやブログに埋め込んで表示させる方法をご紹介します。

Googleマップと同様に、Googleストリートビューの画像もホームページやブログに埋め込むことができます。使い方は簡単、ストリートビューのhtmlコードをコピーして貼り付けるだけです。

平面の地図だけではわからない実際の町並みや風景も、Googleストリートビューのパノラマ画像を付けて紹介すれば一目で理解してもらえます。

また、ストリートビューは外の画像だけでなく、お店や施設内部をパノラマ画像で見ることができるインドアビューも埋め込み可能です。

Googleマップの埋め込み方法は以下の記事をご覧ください。

Googleマップの地図をホームページやブログに埋め込む方法
Googleマップをホームページやブログに埋め込んで、地図を追加する方法をご紹介します。地図の埋め込みはとても簡単で、Googleマップのhtmlコードをコピーしてページに貼り付けるだけです。地図の利用はもちろん無料、慣れれば1分もかかりません。
スポンサーリンク

Googleストリートビュー 埋め込み位置を指定

では、Googleストリートビューの埋め込み方法を説明します。まずはGoogleマップを開いて、表示させたい場所や施設を指定します。

Googleマップ上でその場所を表示、または検索窓から場所や店舗、施設を検索します。

Googleストリートビュー 検索

目的の場所や施設が表示されたら、右下にあるオレンジ色の人型アイコンをクリックします。

Googleストリートビュー表示

表示させたい位置をクリックして画像を表示させます。ストリートビューは青い線、360°写真は青い丸が目印で、カーソルを当てるとプレビュー画像が表示されます。

大きな施設の場合は、地図を拡大すると細かい部分まで見えるようになります。

Googleストリートビュー 表示

指定した位置のストリートビューが表示されました。ビューの画像は360°写真なので上下左右に動かしたり、マウスホイール or 右下の +- ボタンで拡大することができます。

Googleストリートビュー 画像表示

ストリートビューの位置を変更するときは、左下の地図を使うか、画像内に表示されているアイコンをクリックします。左上の矢印アイコンで最初の地図に戻ります。

Googleストリートビュー 位置変更

埋め込みhtmlコードを取得

画像の位置が決まったら、左上のメニューから「画像を共有または埋め込む」を選びます。

Googleストリートビュー 埋め込み

共有から「地図を埋め込む」タブをクリックします。

Googleストリートビュー 埋め込み

埋め込み用のストリートビューが実寸大のサイズで表示されるので、「HTMLをコピー」をクリックして埋め込みコードをコピーしてください。地図内の矢印をクリックすると、表示位置を変更することができます。

Googleストリートビュー 埋め込み

地図内に表示される「この地図は自分専用です」という説明は無視でOKです。表示範囲の確認で邪魔になるなら消しましょう。

HTMLコード左横のメニューから埋め込む画像のサイズを変更できます。サイズは「小 400 × 300」「中 600 × 450」「大 800 × 600」「カスタム」の4種類から選べます。

Googleストリートビュー 画像サイズ変更

カスタムサイズを選ぶと、地図のサイズを自分で指定できます。「実サイズでプレビュー」から、実際に表示される地図サイズを確認できます。

Googleストリートビュー カスタムサイズ

埋め込みコードの貼り付け

あとは表示させたいページにコピーしたhtmlコードを貼り付けてください。

Googleストリートビュー htmlコード貼り付け

以下はhtmlコードを貼り付けて表示させたストリートビューです。実際に動かしてみてください。

レスポンシブ対応のサイトであれば、スマホやタブレットの幅に合わせて画像の大きさを調整してくれますが、横にはみ出る場合はコードを修正してください。

インドアビューの埋め込み

Googleストリートビューは外部の町並みや風景だけでなく、店舗や施設内部のインドアビューも用意されています。もちろん、この画像も埋め込み可能です。

ビルやデパートのような高層建築物であれば、各階ごとのインドアビューもありますよ。

例えば「京都マルイ」で検索すると、右下に階層が表示され、各フロアごとの地図やインドアビューを見ることができます。

Googleストリートビュー 各フロアごとの地図

埋め込み方法はストリートビューと同じです。表示させたいインドアビューの画像を選び、htmlコードをコピーして画像を埋め込んでください。

Googleインドアビュー 埋め込み

Googleストリートビュー埋め込み まとめ

Googleマップのストリートビューやインドアビューを使うと、外部の町並みや風景だけでなく、店舗や施設内部の様子がよくわかります。

画像の埋め込みも簡単で、地図のサイズを決めたらhtmlコードをコピーして貼り付けるだけです。利用はもちろん無料、慣れれば1分もかかりません。

紹介したいお店や名所、施設があれば、ぜひストリートビューを活用してみてください。

Googleストリートビューをスマホで見る方法も以下の記事で紹介しています。

Googleストリートビューをスマホで見る方法
スマホでGoogleストリートビューを見る場合は、Googleマップの地図上で見たい場所を長押しするのが基本ですが、住所や建物、店舗、施設名から検索することもできます。また、建物や施設、店舗の内側を見ることができるインドアビューもあります。
タイトルとURLをコピーしました