【永久保存版】自分のホームページにGoogleストリートビュー(インドアビュー)を埋め込む方法

Googleマップのマイビジネスにストリートビュー(インドアビュー)を掲載した後、せっかくいろいろできるのにそのままにしておくのは非常にもったいない。

ストリートビューは優秀なWebパーツです。今回は自分のホームページにテキストリンクを張ったり、埋め込みをする方法を紹介します。

 

 

ストリートビューを表示させよう

自分のお店のストリートビューを表示させる場合、Googleマイビジネスの管理画面から表示させる方法と、普通に検索して表示させる方法があります。
普通に検索をする場合、検索結果に出てきた「中を見る」をクリックするのではなく、一度地図を開いてからストリートビューを表示させましょう。

「中を見る」をクリックしてしまうと、テキストリンク・HTMLコードを出すメニューが表示できないので注意。

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

マップが表示されたら、ストリートビューを表示させましょう。

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

 

エクスポート方法を選択しよう

ストリートビューを開いたら、店名横にあるメニューボタンをクリックして、「画像の共有または埋め込む」をクリック。

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

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

 

リンクを共有しよう

テキストリンクをエクスポートする場合、そのままアドレスバーをコピーしてもいいのですが、このようにURLが非常に長くなってしまいます。

https://www.google.co.jp/maps/place/%E4%BB%8A%E5%BD%A9/@35.7037163,139.7364687,3a,75y,281h,90t/data=!3m8!1e1!3m6!1srKzhq5sADlEAAAQqZe1ofA!2e0!3e2!6s%2F%2Fgeo2.ggpht.com%2Fcbk%3Fpanoid%3DrKzhq5sADlEAAAQqZe1ofA%26output%3Dthumbnail%26cb_client%3Dsearch.TACTILE.gps%26thumb%3D2%26w%3D129%26h%3D106%26yaw%3D281.90784%26pitch%3D0!7i13312!8i6656!4m5!3m4!1s0x0:0x74a7a2913b364560!8m2!3d35.703715!4d139.736407!6m1!1e1

そんなときは下図の「短縮URL」にチェックを入れると、長かったURLを短くしてくれます。

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

 

 

画像埋め込みコードを取得しよう

同じ画面で「画像の埋め込み」を選択すると、HTMLコードを取得することができます。

埋め込みサイズは自由に選択可能。

また、視点のアングルやパノラマのポイントなど、自由な位置で取得することができるので、自分の好きなところからストリートビューをスタートさせることも可能です。

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

 

取得したHTMLコードは、ホームページやブログのHTML編集画面で埋め込みましょう。

上記の方法で埋め込んだものがこちら。前後左右、グリグリ動かせるようになります。

 

レスポンシブにも対応

WordPressなどで埋め込んだ場合は、そのままでもレスポンシブ対応してくれるので問題ありません。

もしされなかった場合は、iframe内の「width」「height」のいずれか(もしくは両方)をピクセル数から%に変更すればOK。(”width=600″ ⇒ “width=100%”)

 

まとめ

これまで紹介したように、ストリートビューを埋め込むのに難しい作業はほとんどありません。

ほんの5分程度の作業でできるので、ホームページの価値を上げるために、テキストリンクだけではなく埋め込みに是非挑戦してみてください。

 

 

1 thought on “【永久保存版】自分のホームページにGoogleストリートビュー(インドアビュー)を埋め込む方法

コメントは停止中です。