iscle [イズクル] - あなたの生活に役立つネタを!

ストリートビューもサイトに埋め込んで集客!レスポンシブにも対応させる

竹中文人
執筆者:
[最終更新日]2014/11/20
[カテゴリ]Web・IT

会社やお店までの地図としてGoogleマップを利用しているサイトは多いでしょう。イラストで作成した地図よりも分かりやすくとても便利です。

しかしGoogleマップであっても、地図だではその場所のイメージが付かないことも多々あります。そのような時に便利なのが『ストリートビュー』です。行ったことがない場所でも、自分がその場所にいるかのように風景を見ることができるのがストリートビューですね。

▼東京駅をストリートビューで表示した場合

ストリートビューもサイトに埋め込んで集客!

特にお店などでは、お客様に迷わず来客して頂くことは大切ではないでしょうか。せっかくお店に行きたいと思っていても、「地図を見ただけではよく分からない」と行くのをやめてしまう方もいます。また「お店の外観が気になる」「周辺の建物や目印などを調べたい」という方も多くいるでしょう。

実はストリートビューも地図と同様に、Webサイトに埋め込んで表示させることができます。お店などであれば地図だけでなくストリートビューも表示しておくことで、お客様集客に役立てることができるのではないでしょうか。

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

まずGoogleマップを開き、表示させたい場所を検索してください。右下にある人形のアイコンをマウスで地図の上までドラッグしてストリートビューを表示させましょう。
ストリートビューを表示させる

次に歯車アイコンの中にある画像を共有する/埋め込むを選択してください。
画像を埋め込む

画像の埋め込みタブから大きさを選択します。表示されているコードをコピーして、Webサイトの表示させたい所に貼り付けてください。

これだけで地図と同じように、Webサイトにストリートビューを表示させることができます!地図を埋め込む方法と同じですので、慣れている方にとってはとても簡単ですね。

レスポンシブ・ウェブ・デザインに対応させるには?

スマートフォンで観覧した時に地図が画面からはみ出したりしないようにするためには、埋め込んだストリートビューをレスポンシブ・ウェブ・デザインに対応させる必要があります。

「レスポンシブって何?」という方でも、コードをコピー&貼り付けするだけでスマートフォンにも対応させることができます。以前にご紹介した記事【コピペでGoogleマップをレスポンシブに対応させるコード】のページで、その方法をご紹介しております。簡単ですので是非ご覧ください。