この記事のレベル

初心者	（3.5）
重要度	（3.0）
難しさ	（3.0）

こんにちは、編集長のカワウソです！

「Google Mapをホームページに埋め込みたい」と考えていませんか？

近年では、お店やイベント会場の場所を伝えるために、Google Mapを利用しているケースが多いですよね。

そこで今回は、ホームページにGoogle Mapを埋め込む方法について、分かりやすく解説します。

この記事を読めば、Google Mapを埋め込む方法だけでなく、メリットやデメリットについても分かりますよ。

もし、「すぐにGoogle Mapを埋め込みたい」という場合は、以下からご覧ください。

Google Mapを埋め込む方法

それではどうぞ！

Google Mapの埋め込みとは

Google Mapの埋め込みとは、「拡大・縮小」や「移動」などの機能を保持したまま、ホームぺージに地図を表示することを指します。

以下は、Google Mapの埋め込み例です。

見るだけの地図であれば、画像でも事足ります。
しかし、Google Mapをホームぺージに埋め込めば、ユーザーが地図を操作できるのです。

これらの機能により、ホームページを訪れた人は、ただ地図を見るだけでなく、実際に操作して必要な情報を得られます。

とくに、場所やルートの情報が重要なビジネスやイベントのホームぺージにとって有効です。

Google Mapを埋め込むメリット

Google Mapをホームページに埋め込むメリットについて、3つ解説します。

利用者が多い

さまざまなWebサービスがあるなかで、「Google Map（地図）」は日本で3番目に利用者が多く、「Google Search（検索）」よりも利用されています。

▲出典：総務省（2023）「ICT基盤の高度化とデジタルデータ及び情報の流通に関する調査研究」

※クリックで拡大できます。

ホームページにGoogle Mapを埋め込むことは、ユーザーにとって操作しやすい地図が表示できるため、おすすめですよ。

作成・更新の費用がかからない

Google Mapを利用していても、地図を作成・更新するための費用がかかりません。

そもそも、Google Mapを埋め込む場合は、自分で地図の画像を用意しなくて済みます。

もし、画像作成を外注すると、安くても3,000円〜5,000円の費用がかかってしまうでしょう。
※参考：coconala（地図・案内図作成）

また、Google Mapは、Google側で自動的に更新されるため、最新の状態が保たれています。

Googleが提供している地図の更新については、以下のとおりです。

地図は、文字通り毎日毎秒更新しています。Google では、衛星画像やストリートビューカー、Google マップユーザー、地元の企業主などから世界中の最新情報を常に収集しており、その情報を使用して地図を更新しています。

引用：Google の地図データについて知っておくべき 9 つのこと

もちろんホームページに埋め込んだGoogle Mapについても、同様に新しい地図が表示されます。

このように、地図の作成や更新費用が必要ないため、誰でも気軽に利用しやすいですよ。

外部リンクよりも離脱しにくい

Google Mapを埋め込むことで、ユーザーがホームぺージから離脱してしまうのを防ぎやすくなります。

ホームページにGoogle Mapへの外部リンクを設置した場合、ユーザーを外部サイトに誘導することになります。

つまり、地図を見るためとはいえ、一時的に自社のホームページから離れてしまうのです。
なかには、そのまま自社のホームページに戻ってこないユーザーもいるでしょう。

しかし、Google Mapを埋め込む場合、外部サイトに移動しなくても、ホームページ上で地図の確認や操作ができます。

ホームページ内で完結できるため、ユーザーが離脱しにくくなりますよ。

Google Mapを埋め込むデメリット

Google Mapを埋め込むことで、ページの読み込み速度が遅くなってしまうおそれがあります。

地図を表示するには、Google Map（外部サイト）の情報を読み込む必要があるためです。

ページの読み込み速度があまりにも遅いと、ユーザーが離脱する原因になりかねません。
さらにページの読み込み速度は、近年「SEO（検索エンジン最適化）」でも重視される傾向にあります。

とはいえ、あくまでも「ページの読み込み速度があまりにも遅い」場合の話なので、確認して問題がないレベルであれば、そこまで気にする必要はありません。

ページの読み込み速度（サイトスピード）については、以下の記事で詳しく解説していますよ。

Google Mapを埋め込む方法（WordPress）

ここからは、WordPress（ワードプレス）のホームぺージにGoogle Mapを埋め込む方法について、解説します。

目的地を表示する場合

Google Map上に、目的地を表示して埋め込み方法を解説します。

ルートを追加する場合

Google Map上に、ルート（出発地から目的地までの経路）を追加する方法を解説します。

最寄りの駅やバス停などから、目的地までのルートを案内したいときに設定します。

今回は、「JR大阪駅 中央口」から「グランフロント大阪」までのルートを例に挙げていますよ。

ストリートビューを表示する場合

Google Mapのストリートビューを表示する方法を解説します。

ストリートビューは、Google MapやGoogle Earthなどで使える機能で、実際に道を歩いているかのように周りの景色を見渡せます。

Gooogle Mapのサイズを変更する方法

コンテンツの大きさにあわせて、サイズを調整してみてください。

まとめ

今回は、WordPressを使ったホームページに、Google Mapを埋め込む方法について解説しました。

この記事を参考に、Google Mapやストリートビューを、うまくホームぺージで活用してみてください。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！