「ストリートビューは、Googleマップから見るしかないだろうから、せっかく撮影・公開してもみて貰えるのかなぁ…。」
いえいえ、ストリートビューはホームページ内の任意の場所に表示させる事も出来ますし、ブログの投稿内に表示する事も可能です。
埋め込むというのは、リンクを貼るという事ではなく、ホームページの中にグルグルと動かせるストリートビューを任意のサイズで表示させるという事です。
しかもたった1行コードを挿入するだけ！非常に簡単に埋め込む事が可能です。
今回はその埋め込み方法をご紹介いたします。
ストリートビューをホームページに埋め込む（任意のサイズで表示させる）
最初に表示させたいストリートビューをGoogleマップで表示
スマホでも埋め込み用のコードを作る事は出来るのですが、少し面倒なので今回はPCでの方法にて解説いたします。
最初に表示させたいストリートビューをGoogleマップで表示します。
「Googleマップ」の検索窓から任意のキーワードで目的の場所を表示させます。
左側のビジネス情報表示の中に写真が3枚ほど表示されています。
その中の写真の左下に矢印が円を描くような形のアイコンが付いてる画像があります。 そのアイコンがストリートビュー写真を示している印です。
その写真をクリックするとストリートビュー（屋内版）が表示されます。
埋め込み用のコード1行をコピペ
表示させたいストリートビューが表示されている状態で画面左上（黒いボックス内）のビジネス名右側のボタンを押します。
「画像を共有または埋め込む」という項目が出てくるので選択します。
「画像を埋め込む」を選ぶと埋め込むコード
<iframe src=”https://www.google.com/maps/embed?○○○</iframe>が表示されます。
※左のブルダウンから表示サイズを選ぶ事が可能です。
小…width=”400″ height=”300″
中…width=”600″ height=”450″
大…width=”800″ height=”600″
カスタムは任意のサイズ(ピクセル数）を入力する事ができます。
このコードをコピーしてホームページ内や投稿記事内に貼り付けることでGoogleマップを埋め込み表示させる事ができます。
コードを書き換えて表示サイズを変える
コード内のwidth=”○○”（横サイズ）height=”○○”（縦サイズ）の数字はピクセル数の設定なので、これを任意の数字に変更する事によって、好みのサイズに指定する事が可能です。
数字の部分をwidth=”100%”やwidth=”50%”などとする事でパーセントでの指定も可能です。色々と試してみてみてはいかがでしょうか？
「小」の表示サンプル
幅400ピクセル高さ300ピクセル固定です。
※スマホで閲覧されていると違いがわかりずらいかもしれません。例えばiPhoneなどは画面ピクセルの仕様が幅375ピクセル×高さ667ピクセルなので、縦画面表示だと幅いっぱいに表示されていると思います。画面を縦から横にしたりする事で表示サイズの違いを確認できると思います。
「width=”50%” height=”300″」の表示サンプル
高さ300ピクセル固定で表示領域の幅半分で表示されます。
「width=”100%” height=”300″」の表示サンプル
高さ300ピクセル固定で表示領域の幅いっぱいに表示されます。
iosの不具合
スマホからの閲覧で、ストリートビュー埋め込み画像部分をタッチした時にページの最後の方までジャンプ(急に画面が一番下まで飛ぶ）現象が起こった方がいると思います。
どうやらこれはios（iframe表示絡み）の不具合のようです。
OS側（apple）の対応がないと解消が難しそうです。
弊社ではサファリでもクロームでも同じ現象が起こる事を確認しています。
OSに原因があるという事であれば、appleが早く対策を取り修正してくれることを願っております。
＜追記＞
2018年10月頃に気付きましたが、上記の現象が解消しているようです。
YouTubeやGoogleマップなどでも
この方法（iframe）で表示するのは、YouTubeやGoogleマップなどでもほぼ同様です。
ホームページ内に外部のコンテンツを表示をする簡単な方法なので上手に活用しましょう。