WordPress にGoogleマップを埋め込む方法

スマートフォンでGoogleマップを利用して、現地に赴くユーザーが多い。そのニーズに答えて店舗や会社の所在地に Google マップがあるとユーザーにとってはうれしい心遣いだ。

ここでは WordPress を使って簡単に Google マップを埋め込む方法を紹介する。

バズ部式マーケティング広告費を
1/10にして売上を倍増させる全手法

弊社やクライアント様が取り組んできたコンテンツマーケティングの効果と、具体的な施策内容について全94ページにわたって徹底解説！ぜひ貴社のWEBマーケティングにもご活用ください。

今すぐ無料e-BooKをダウンロード

バズ部式マーケティング広告費を
1/10にして売上を倍増させる全手法

弊社やクライアント様が取り組んできたコンテンツマーケティングの効果と、具体的な施策内容について全94ページにわたって徹底解説！ぜひ貴社のWEBマーケティングにもご活用ください。

今すぐ無料e-BooKをダウンロード

１．Google マップを埋め込む方法

Google マップの埋め込みは、下記の手順でできる。

• Google マップのコードを取得する
• Google マップを埋め込む

操作は簡単なので安心してほしい。

１-１．Google マップのコードを取得する

最初に Google マップにアクセスしよう。

図の赤枠部分に店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。ここでは仮に虎ノ門ヒルズ森タワーでやり方を紹介する。

右にある「共有」をクリックしよう。

メニューが表示されるので「地図を埋め込む」をクリックする。

すると地図の埋め込み用のコードを取得する画面が表示される。

左上部にある▼のプルダウンをクリックすると、埋め込む地図のサイズを４パターンから選ぶことができる。

用意されたサイズは次の３種類だ。

• 小：400 × 300 ピクセル
• 中：600 × 450 ピクセル
• 大：800 × 600 ピクセル

自分でサイズを決めるなら「カスタムサイズ」を選ぶと良い。

カスタムサイズをクリックすると、次の画面が表示されるので、図の通り設定しよう。

１-２．Google マップのコードを埋め込む

ここでは、ブロックエディター（グーテンベルグ）でのコードの埋め込み方法を解説する。

WordPress の管理画面にログインし、編集画面にアクセスしよう。編集画面の左上から「カスタムHTML」のブロックを選択する。

本文に表示された「HTMLを入力」のブロックに、先ほどコピーしたコードをペーストする。

「プレビュー」を選択してプレビューを表示させよう。

２．クラシックエディターに埋め込む場合

従来のクラシックエディターに埋め込む場合は、以下の通りに行う。

WordPress の管理画面にログインして、マップを表示させたい投稿ページか固定ページの管理画面にアクセスしよう。ここでは投稿ページを使って紹介する。

テキストをクリックする。

地図を埋め込む箇所をクリックし、コピーしたGoogle MapのHTML埋め込みコードを本文内にペーストする。

2-2.Googleマップの表示を確認する

地図が埋め込めたか確認をしよう。編集画面右上にあるビジュアルをクリックする。埋め込みんだGoogleMapが表示されている。

実際の表示は管理画面からは確認できないため、プレビューで確かめよう。

表示がされていたらGoogleマップの埋め込みが完了だ。

３．固定ページの会社概要に埋め込む方法

それでは実際に、Wordpressの固定ページで作成した会社概要にGoogleマップを貼り付けてみよう。

まずはWordpressの管理メニューから「固定ページ」→「会社概要」の編集画面へ。

Googleマップを埋め込みたいブロックで「カスタムHTML」を選択する。

「１-１．Google マップのコードを取得する」で解説した通り、Googleアップから埋め込みたい住所のコードをコピーし、固定ページのカスタムHTMLブロックに貼り付ける。

「プレビュー」を押すことで実際の表示と同じようにプレビューされる。

ちなみに、投稿画面右上の「プレビュー」から「新しいタブでプレビュー」で実際の固定ページがどのように表示されるかも確認できる。

今回は、以下のように表示できた。

４．Googleマップを効果的に活用できるプラグインWP Google Maps

ここで、Googleマップをより効果的に活用できるプラグインWP Google Mapsを紹介しよう。

Googleマップをそのまま記事コンテンツや固定ページに埋め込む場合はここまでの解説通り、プラグインを導入せずに行える。WP Google Mapsを利用することで、表示されるマップをカスタマイズしたり拡張することができる。

例えば地図上に任意でアイコンを表示させたり、地図の幅や色などデザインの調整や、座標出なく住所での検索が可能になるなど、様々な機能がある。

注意点としては、有料版と無料版があること。無料版だと複数の地図を作ることができない。もう一つは、操作が英語で慣れるまで若干複雑である点だ。

慣れれば使いやすいプラグインなので、無料版を試しに使ってみることをおすすめする。

５．まとめ

WordPressにGoogleマップを埋め込む方法をおさらいしてみよう。ブロックエディターを利用すれば簡単に表示できることがお分かりいただけたはずだ。

①埋め込みたい場所をGoogleマップで指定する
②Googleマップの「共有」から埋め込みコードをコピーする
③埋め込みコードを任意の箇所にペーストする
④プレビューでGoogleマップが埋め込めているか確認をする

Googleマップで場所が分かるとユーザーが経路検索をするのに大変便利だ。この際に是非活用しよう。

wordpressの設定方法をより深く理解したい方へ。バズ部のノウハウを全て詰め込みました。