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

スマートフォンでGoogleマップを利用して、現地に赴くユーザーが多い。そのニーズに答えて店舗や会社の所在地に Google マップがあるとユーザーにとってはうれしい心遣いだ。ここでは WordPress を使って簡単に Google マップを埋め込む方法を2つ紹介する。

1つめは「TinyMCE Advanced」というプラグインを使った方法だ。とても簡単な手順なので大半の方は1章を読むだけでGoogleマップを埋め込むことができる。(「TinyMCE Advanced」はGoogleマップの埋め込みはもちろん、動画や画像の埋め込み、テキスト画面の操作性も向上するプラグインだ。)

2つめはプラグインを使わずにHTMLを使う方法だ。「TinyMCE Advanced」のプラグインを導入できない方は2章を参考にしよう。1-1までは埋め込み手順が同じなので、このまま読み進めよう。


webサイトにGoogleマップを埋め込まずに、Googleマップの画像を貼り付けているだけのサイトを見ることがある。地図そのもののスクリーンショットをサイトに貼り付ける行為はGoogleマップの利用規約に違反する可能性がある。もしそのような懸念があるときは法務部門や、法律の専門家に相談してから適切に利用しよう。


1.Google マップを埋め込む方法

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

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

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

Googleマップを埋め込む前にプラグイン「TinyMCE Advanced」を必ずダウンロードしよう。
このプラグインを使うとコピー&ペーストをするだけでGoogleマップを簡単に埋め込むことができる。他にも動画や画像の埋め込みなど豊富な編集機能があるのでWordPress初心者から上級者の大半が使っている。必須と言ってもいいプラグインなのでこの機会に導入しよう。


もしプラグインを利用しなくてもGoogleマップを埋め込むことはできる。HTMLを利用するが操作は簡単だ。2章で紹介するが、プラグインを利用する場合と操作は途中まで同じだ。このまま読み進めよう。

1-1.Google マップのコードを取得する

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

グーグルマップ

図の赤枠部分に店舗名、オフィス名、またはビル名を入力して、検索ボタンをクリックすると検索結果が表示される。

検索内容の入力

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

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

地図を埋め込む

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

地図を埋めこむをコピー

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

サイズを選択

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

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

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

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

ピクセル単位で数値を入力

※ ピクセル数を計測する方法
あなたのコンテンツの縦・横サイズを基準にしてピクセル数値を入力したいなら、各ブラウザの拡張機能を使うと簡単に計測することができる。Google Chrome であれば「Page Ruler」、Firefox であれば「MeasureIt」がオススメだ。

1-2.Google マップのコードを埋め込む

ここでは HTML の知識がなくても簡単にコードを埋め込む方法を紹介する。
WordPress の管理画面にログインして、投稿ページか固定ページの管理画面にアクセスしよう。
そして、図の通り地図を埋め込む箇所をクリックする。


簡単に地図を埋め込むには、プラグイン「TinyMCE Advanced」のインストールが必要だ。

地図を埋め込む箇所をクリック

ビジュアルエディタのメニューより「挿入 → メディア」の順にクリックしよう。“動画”と表記があるが、コードを埋め込むツールを利用するだけだ。

メディアを選択

次に「埋め込む」タブをクリックする。

埋めこむをクリック

先ほどコピーした地図のコードを貼り付けて、「OK」をクリックする。

メディアを挿入

管理画面上では、埋め込まれた地図は図の通りWordPress上に表示される。

埋め込み完了

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

プレビューで確認

以上が Google マップの埋め込み方法だ。

※ 会社名を Google マップに登録する
Google マップに登録すれば検索結果に会社名やビル名がを表示できる。ただし、あなたがその店舗やビジネスのオーナーであるという条件が必要だ。登録方法については、『 Google マップに会社名を登録する方法』を読んで設定しよう。
※ Google マップを埋め込むプラグインについて
MapPress Maps for WordPress」という便利なプラグインはあるが、スマートフォンでも問題なく地図を表示するには操作に精通する必要がある。また、無駄にプラグインを増やすとサーバーの負荷を増やすため、本当に必要かを検討して導入しよう。

2.    HTMLを使ったGoogleマップの埋め込み方法

プラグインを使わずに、HTMLを使ってGoogleマップを挿入する方法を紹介する。操作方法は簡単なので安心してほしい。1-1までは操作方法が同様なので確認してから読みすすめよう。

2-1.HTMLを使ってGoogleマップのコードを埋め込む

ここでは HTMLを使って簡単にコードを埋め込む方法を紹介する。WordPress の管理画面にログインして、投稿ページか固定ページの管理画面にアクセスしよう。ここでは投稿ページを使って紹介する。

新規投稿を選択
テキストをクリックする。

テキストエディタに切り替え

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

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

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


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


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


3.まとめ

WordPressにGoogleマップを埋め込む方法をおさらいしてみよう。プラグインを使った方法もHTMLを使った方法も作業工程に大差はない。

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

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

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

広告に頼り切ったマーケティングの打開策としてコンテンツマーケティングについて調べているけれど、よく分からないと悩んでいませんか?

本書は弊社やクライアント様がコンテンツマーケティングに取り組み

  • ・SEOのみで月間100万PV集めた方法
  • ・平均6.92%のコンバージョン率が出た新規顧客獲得法
  • ・CPLやCPAを大幅に改善した方法とそのからくり

など、コンテンツマーケティングの効果と、具体的な施策内容を全94ページに渡って詳細に解説しているものです。

ぜひ、貴社のWEBマーケティングにもご活用ください。

eBookをダウンロード