Googleストリートビュー(屋内版)のブログやホームページ埋め込み方

こんにちは。
あまぞーです。
いきなりですが、今回は
こんな「Googleストリートビュー(屋内版)」をホームページやブログに埋め込む方法についてご紹介致します!
ホームページ、ブログにGoogleインドアビューを埋め込む方法
1、Googleマップから「埋め込みコード」を取得します!
マップで名称を検索バーに入力し、写真の左下に丸い矢印があれば、それがインドアビューの写真です!
2、上記のような写真をクリックした後、①の3つの点マーク(共有ボタン)を押す→「画像を共有または埋め込む」
を選択、共有画面上で②「地図を埋め込む」をクリック。
③のサイズを「カスタムサイズ」に変更した後に④「HTMLをコピー」をクリックします。
これでコピーされたHTMLコードをホームページのお好きな場所に貼ればOKです!
WordPressであれば「テキスト入力」の画面でそのまま貼り付ければOKです^^
スマホから見ても適切なサイズで表示する方法
先ほどのコードをそのまま貼ってしまうと、PCで閲覧する際には問題ないのですが、スマホで見た際に
はみ出して表示されてしまいます。。。
70%くらいの人がスマホから見る傾向があるので、スマホにもしっかり対応しておく必要がありますね!
まず先ほどコピーしたコードの中で、
<iframe src=”https://www.google.com/maps/embed?pb=” width=”800” height=”600″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
このようになっている赤文字の「800」の部分を「100%」と書き換えましょう!
<iframe src=”https://www.google.com/maps/embed?pb=” width=”100%” height=”600″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>
こんな感じです。
そうすればスマホでも画面にぴったりと表示されるようになります^^
まとめ
今回紹介したような「Googleストリートビュー(屋内版)」を取り入れる店舗・施設が多くなってきています。
Googleでも公式のデータとしても、「ストリートビュー(屋内版)の写真の影響でユーザーの関心が2倍になります。」と
言われているように、集客効果としてもあることがわかります!
何かオススメのお店を紹介する際にもブログやホームページ上でこんな360°写真があれば、
他者との差別化もできるかもしれません!
是非、参考にしてみてくださいね^^
ほなまた(*´∇`*)
Comment
takafumiさん
コメントありがとうございます。
関連記事までお読み頂きありがとうございます^^
その場所のイメージがつきやすいので店舗の集客にはぴったりですよね!
これから需要が高まると思いますので是非認定フォトグラファーにチャレンジしてみてくださいね^^
こんばんは。
関連記事も読ませていただきました。そして今回の記事、ストリートビューの埋め込みとは!
こういうことができるのですね。感動してしまいました。
お店の紹介記事でこういう見せ方ができれば確かに集客効果は抜群ですね。
認定フォトグラファーの仕事は意義がありますね。これは本当にすごいです。