ビジネスとIT活用に役立つブログBlog


Google マップ・ストリートビューをレスポンシブデザインのwebサイトに埋め込む方法をご紹介!

この記事をシェアする:

自社のwebサイトに「画像」で作成した地図を表示していませんか?

「画像」で作成した地図の場合、スマートフォンで閲覧すると画像が小さくなり、文字や地図記号を認識することができなくなってしまう恐れがあります。その事態を避けるためにGoogleマップやストリートビューをwebサイトに埋め込むことをおすすめします。

今回の記事では、Googleマップとストリートビューをwebサイトに埋め込むメリットと合わせて、レスポンシブデザインに埋め込む方法をご紹介いたします。

Google マップとストリートビューとは?

Googleマップは、言わずと知れたGoogleが提供している地図アプリです。
Googleマップは220を超える国と地域に加え、何億ものお店や場所が表示され、GPS ナビ、交通量、交通機関に関するリアルタイムの情報を入手できます。また、食料品店や薬局をはじめとする生活に欠かせない重要なお店に関する最新情報も取得できます。

ストリートビューはGoogleマップの機能の1つで、実際に道を歩いているかのように周りの景色を画面上で見渡すことができます。画面を上下左右に動かして360度見ることができるので、その場の雰囲気がリアルに伝わります。

詳しい内容は下記サイトをご覧ください。

Google マップをwebサイトに埋め込むメリット

前章で述べたように、webサイトに画像で作成した地図を表示させるよりもGoogleマップを埋め込んだ方がスマートフォンに最適化しやすいメリットがあります。
また、ユーザー自身で地図をズームしたり、スクロールしたりすることができるため、詳しく見たい道や周辺の建物は何があるか等を見ることができます。

ストリートビューをwebサイトに埋め込むメリット

ストリートビューを活用すると、ユーザーが目的地までの経路を確認することが容易になります。

また、Googleマップに建物の内観を登録すれば、ユーザーは建物の中をバーチャル体験のように閲覧することができます。施設内の設備や魅力をより具体的にユーザーに伝えることができるため、集客効果が期待されます。

では、Googleマップとストリートビューの埋め込み方をご紹介いたします。

Google マップを埋め込む方法(レスポンシブ対応)

1. Googleマップにアクセスし、表示させたい場所を検索します。

Googleマップ

2.「共有」をクリックし、「地図を埋め込む」をクリックします。

3. 埋め込み用のタグが表示されますので、「HTMLをコピー」をクリックし、埋め込むページのHTMLに貼り付けます。

4. 貼り付けたHTMLの「width=”600″」を「width=”100%”」(半角英数)に変更します。

Googleマップで発行したHTML

変更後のHTML

実際の埋め込みイメージ

これでスマートフォン表示にしても横幅がはみ出すことなく表示されます。

ストリートビューを埋め込む方法(レスポンシブ対応)

1. Googleマップにアクセスし、表示させたい場所を検索します。

Googleマップ

2. 左メニューの「ストリートビューと360°ビュー」をクリックします。

3. ストリートビューが表示されますので、下記画像の赤枠内のアイコンをクリックし、「画像を共有または埋め込む」をクリックします。

4. 「地図を埋め込む」をクリックし、「HTMLをコピー」をクリックします。

5. コピーしたHTMLを埋め込むページに貼り付け、HTML内の「width=”600″」を「width=”100%”」(半角英数)に変更します。

Googleマップで発行したHTML

変更後のHTML

実際の埋め込みイメージ

これでスマートフォン表示にしてもきれいに表示することができます。

まとめ

いかがでしたか?今回はGoogleマップとストリートビューをwebサイトに埋め込むメリットと方法をご紹介しました。
Googleマップの機能は他にもたくさんあります。下記の記事はGoogleマイマップというサービスでオリジナル地図を作成方法等のご紹介しております。こちらも是非試してみてください。


この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!