ホームページや記事を閲覧中に「所在地」や「周辺情報」を知りたい場合、Googleマップが埋め込んであると、その場で地図の詳細が確認できるのでとても便利です。
この記事では、WordPressにGoogleマップを埋め込む方法について「ブロックエディター」「クラシックエディター」「プラグイン」それぞれを利用する場合においての手順について徹底解説しています。Googleマップを埋め込むメリットは大きく、誰でも簡単に地図の埋め込みができるので、ぜひこの記事を参考に、地図を埋め込んでみましょう。
Googleマップを埋め込むとは？
外部サービスの機能を自身のホームページ等のWeb媒体で利用できるようにすることを「埋め込む」といいます。Googleマップの画像やリンクを貼るのではなく、ページに直接Googleマップ（地図）を埋め込むことで以下のようなメリットがあります。
Googleマップを埋め込むメリット
Googleマップを埋め込むメリットは、以下の4つです。
- スマートフォンに最適化しやすい
- 外部サイトに移動する手間が省ける
- 常に最新の地図情報を提供できる
- ユーザーの口コミ等を表示できる
それぞれ詳しく解説していきます。
スマートフォンに最適化しやすい
Googleマップを埋め込むとユーザー自身がズームやスクロールを使って地図を確認できるため、詳しく調べたい道や周辺の建物を確認できるようになります。地図の画像をそのまま貼りつけるよりも、Googleマップを埋め込んだほうがユーザーの利便性が上がります。
外部サイトに移動する手間が省ける
地図の画像をそのまま貼り付けてあるだけだと地図の詳細をサイト内で確認できないので、地図の詳細を知りたいユーザーは、わざわざGoogleマップやYahoo!地図などの外部サイトに移動する必要があります。
Googleマップを埋め込むことで、その場で地図の詳細を確認できるため、ユーザーが外部サイトに移動する手間が省けます。また、サイト管理者にとっても、ユーザーが外部サイトに離脱するのを防げるというメリットがあります。
常に最新の地図情報を提供できる
埋め込んだ地図はGoogleマップと連携しているため、Googleマップを埋め込めば常に最新の地図情報をユーザーに提供できます。それに対して地図の画像をそのまま貼り付けている場合は当然情報は更新されないため、誤った情報をユーザーに提供してしまうリスクがあります。
また、地図の画像をそのまま貼り付ける行為は「Googleプライバシーポリシー」に違反する可能性もあるので、地図の画像を貼り付けるのではなく、Googleマップを埋め込むようにしましょう。
ユーザーの口コミ等を表示できる
埋め込んだGoogleマップには「ユーザーからの評価」「ユーザーからの口コミ」「ルート案内ボタン」「住所」「拡大地図の表示ボタン」が表示されます。どれもユーザーにとって有益な情報ばかりなので集客効果が非常に高いといえます。
さまざまなカスタマイズをしないのであれば、だれでも簡単にでき、かつ集客効果が非常に高いので、自社で実店舗を運営している場合は必ずGoogleマップを埋め込むようにしましょう。
Googleマップの埋め込み箇所と推奨サイズについて
Googleマップの埋め込み箇所は、以下がおすすめです。
- 固定ページ（推奨サイズ：縦600px前後、横1,000px以内）
- 投稿ページ（推奨サイズ：縦400px前後、横630px以内）
- フッター（推奨サイズ：縦350px以内、横350px以内）
特別な理由がない限りは、上記の推奨サイズを設定しましょう。サイズが合っていないとレイアウトが崩れるなどユーザーにストレスを与えてしまう可能性があります。
Googleマップの埋め込み方法
Googleマップを埋め込むためには、直接HTMLコードを埋め込む方法とプラグインを使う方法があり、直接HTMLコードを埋め込む場合は、ブロックエディターとクラシックエディターで埋め込み方法が異なるので注意が必要です。それぞれ解説していきます。
直接HTMLコードを埋め込む方法
まず、Googleマップにアクセスします。Googleマップ画面の左上に検索窓があるので、検索したいワードを入力します。すると、検索したワードの場所や情報が表示されます。
画面左側に表示されたメニュー内に「共有」ボタンがあるので、選択します。
「リンクを送信する」と「地図を埋め込む」の2つのタブがあります。ここでは「地図を埋め込む」を選択します。
「地図を埋め込む」を選択すると、地図のサイズを選択する画面が表示されます。地図の表示サイズは「小」「中」「大」「カスタムサイズ」から選択できます。
画面右下に、地図の縮尺を調節するボタン（＋－）がありますので、希望の縮尺に調節します。
画面の上部に表示されているHTMLコード（埋め込みコード）をコピーします。
コピーしたHTMLコードをWordPressに貼り付けることで、WordPressへのGoogleマップ埋め込みが完了しますが「ブロックエディター」と「クラシックエディター」で操作方法が異なりますので、それぞれ解説します。ここでは「固定ページ」に地図を埋め込む方法で解説します。
ブロックエディター（グーテンベルグ）の場合
まず、ブロックエディター（グーテンベルグ）でGoogleマップを埋め込む方法について解説します。
WordPress管理画面から新規固定ページを追加する画面を開き、Googleマップを埋め込みたい箇所で「＋」ボタンを押して、ブロックを追加します。
「＋」ボタンを押して表示された「ブロックエディター」から「カスタムHTML」を選択し、さきほどコピーしたHTMLコードを貼り付けます。
すると、固定ページの指定した場所に「Googleマップ」を埋め込むことができます。
クラシックエディターの場合
従来のクラシックエディターでGoogleマップを埋め込む方法について解説します。
WordPress管理画面から、新規固定ページを追加する画面を開き「テキスト」を選択します。
地図を埋め込みたい場所にカーソルを持っていき、さきほどコピーしたHTMLコードをそのまま本文内に貼り付けます。
すると固定ページの指定した場所に「Googleマップ」を埋め込むことができます。
実際の位置と違う地図が表示されてしまう場合
実際の位置と違う地図が表示されてしまう場合やピンポイントで表示したいといった場合は、Googleマップの座標で調整できます。
Googleマップで地図の中心に設定したい場所をクリックすると、クリックした場所に関するメニューが表示されます。メニューの「共有」をクリックし、そのあとの流れは前項で解説したGoogleマップ埋め込み手順と同じです。
プラグインを利用する場合
プラグインを利用する場合は、プラグインのなかで設定から埋め込みまで完了させるので、さきほど解説した「Googleマップにアクセス～HTMLコードをコピー・貼り付け」の手順は不要となります。プラグインによって使い方は異なりますので、それぞれのサイトでご確認ください。
Googleマップ埋め込みで、特におすすめのプラグインは以下の4つです。
- Google Maps Easy
- WP Google Maps
- MapPress Maps for WordPress
- TCD Google Maps
それぞれの特徴について詳しく解説していきます。
Easy Google Maps
Easy Google Maps の特徴は、以下の通りです。
- 地図のデザインが豊富
- 複数の地図を設置可能
- サイドバーにも表示が可能
- 複数のマーカーを表示
- マーカーへのリンクが可能
- スマホ対応の地図が作成可能
Easy Google Mapsは、カスタマイズできる項目が多く、無料で利用できるため、特に人気のある地図プラグインです。操作もシンプルで、とても綺麗な地図が作成できるので利用してみてはいかがでしょうか。
WP Google Maps
WP Google Mapsの特徴は、以下の通りです。
- マップをショートコード化できる
- マーカーの絞り込み検索ができる
- マーカーのアイコンを自由にデザインできる
- マーカーへのテキスト・写真・動画の挿入ができる
- 任意のサイズ、デザインのマップを作成できる
- ポリラインを用いてマップ内にルートの線描ができる
WP Google Mapsは、リッチなデザインや高度なマーカー機能が付いている人気の地図プラグインです。無料版と有料版があり、無料版は一つしか地図が作成できないなど機能が制限されますが、一つの地図で事足りる場合は無料版で十分といえます。
MapPress Maps for WordPress
MapPress Maps for WordPressの特徴は、以下の通りです。
- すべての投稿、固定ページに地図を追加できる
- シンプルでプロフェッショナルなデザインの地図が作成できる
- すべての端末でボタンのワンクリックでGoogleマップへ誘導できる
- 地図を複数作成し、一つのページに配置することもできる
- マップをショートコード化できる
- 100以上のマーカーアイコンが利用できる
MapPress Maps for WordPressは、記事に地図を埋め込む際に投稿画面ですべてを完結できるように作られています。プラグインを有効にすることで記事投稿画面に地図埋め込み専用の入力値が追加されるので、住所を検索してそのまま記事に埋め込むだけで簡単に地図を作成・表示できます。
TCD Google Maps
TCD Google Mapsの特徴は、以下の通りです。
- さまざまなデザインから選ぶことができる
- ショートコードで簡単に表示できる
- 縦、横のサイズ、ズームの調節機能が付いている
- 住所を入力するだけで地図を表示できる
- ボーダーの表示、非表示ができる
- 中央表示の選択ができる
TCD Google Mapsは、豊富なデザインが用意されており、縦横のサイズやズームの調節ができるほか、ショートコードで簡単に埋め込みができます。自社のサイトに合わせたおしゃれなGoogleマップを表示させたい場合におすすめのプラグインです。
プラグインを利用するにはAPI Keyが必要
プラグインを利用するには「API Key」の入力を求められることが多いです。この「API Key」を取得するには、以下の手続きが必要です。
- Googleアカウントの作成
- Google Cloud Platformにてプロジェクトの作成
- 使用するAPIの有効化
- APIキーの作成
- APIキーの利用範囲を制限する
- 請求先アカウントの作成
プラグインを利用するには上記の「API Key」の手間が発生するうえ、無料で利用できる範囲を超えると有料となります。2022年8月現在の無料範囲は1か月で「地図の読み込み28,000回」となっており、28,000回を超えると有料となります。一見、あまりメリットがないように思いますが、プラグインを利用したほうがさまざまなカスタマイズが可能なので、ユーザーの集客に繋がりやすいです。また、設定で利用範囲を制限可能で、大量のアクセスがない限りは無料範囲内で収まるので、そこまで利用料金について心配する必要ないといえます。
API Keyを取得する際の注意点として、API Keyを取得したら外部に流出しないよう注意しましょう。API Keyが流出すると不正アクセスや情報を盗み取られるリスクがあります。
まとめ
この記事では「Googleマップを埋め込むメリット」や「WordPressでGoogleマップを埋め込む方法」などについて詳しく解説してきました。
Googleマップの埋め込みは誰でも簡単にできメリットも非常に大きいので、やらない手はありません。Googleマップの埋め込みには「直接Googleマップのコードを埋め込む方法」と「プラグインを使って埋め込む方法」がありますので、Googleマップを埋め込む目的やWebスキルに応じて選びましょう。直接Googleマップを埋め込む方法なら誰でも簡単にすぐにできます。まだ地図の埋め込みを行っていない場合は、本記事を参考にGoogleマップの埋め込みを行ってみてはいかがでしょうか。