WordPressサイトに地図を埋め込む方法

Author:Issac 時 Updated:

WordPressブログを運営していると、ページ内に地図を埋め込みたい場面があります。店舗や事務所の住所を載せる場合でも、特定の場所を案内する場合でも、地図ほど分かりやすいものはありません。今回は、WordPressサイトに地図をきれいに埋め込む方法を見ていきます。

WordPressに地図を埋め込む方法

WordPressに地図を追加する方法はいくつかあります。よく使われる地図サービスを整理すると、主に次の3つです。

  • Googleマップ
  • Naver Map
  • Kakao Map

これらのサービスには、特定の場所情報を外部サイトに表示できる共有機能があります。

この記事では、まずGoogleマップを使って地図を埋め込む方法を説明します。

おすすめの地図埋め込み方法

地図は、テーマのブロックエディターが提供する地図ブロックで挿入することもできますし、埋め込みコードを直接貼り付けることもできます。専用の地図ブロックを使うと、デザインされた見た目で地図を表示できます。

Kadenceが提供するGoogleマップブロック
Kadenceが提供するGoogleマップブロック

ただし、地図ブロックは意外と設定が面倒で、バージョンの相性によってはページ上でうまく表示されないことがあります。その確認に時間を取られる場合も少なくありません。

そのため、私がすすめるのは埋め込みコードを使って地図を表示する方法です。

地図を埋め込む手順

地図の埋め込みは、大きく分けて2つの手順で進めます。

  1. サイト内に地図を置くスペースを用意する
  2. 地図の埋め込み情報を取得する

まずは、WordPressサイト内に地図を表示する場所を作りましょう。

地図を置くスペースを作る

地図を挿入する前に、どこに表示するかを決めてスペースを作る必要があります。ここでは例として、下のような2カラムレイアウトを使って地図を埋め込む流れを説明します。

例：光化門の地図を埋め込む

光化門は、現在韓国ソウル特別市鍾路区孝子路12にあります。

右側には、光化門に対応する地図情報を表示します。

2カラムレイアウトを作成する

最初に設定するのは、2列のRow Layoutです。

  • スラッシュ/を入力し、Row Layoutを検索します。
image 1 3
Kadence Row Layoutで2カラムを選択する

作成された2つのカラムを、それぞれ段落ブロックとして使います。左側には説明文を入力し、右側にはカスタムHTMLブロックを検索して挿入します。

image 1 4

右側のカラムにカーソルを置き、/htmlと入力して検索します。すると、下の画像のようにCustom HTMLが表示されます。

カスタムHTMLブロックを挿入する方法
カスタムHTMLブロックを挿入する方法

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

Googleで光化門を検索し、Googleマップの情報カードを表示します。

光化門の情報カード右下にある共有ボタンをクリックします。すると、場所情報を共有する方法を選ぶ画面が表示されます。（下の画像をクリックすると拡大できます。）

  • image 1 6
  • image 1 7
  • image 1 8

「地図を埋め込む」タブを選択します。次に左側で「小」など適切なサイズを選び、右側の「HTMLをコピー」ボタンをクリックします。コピーされるiframeコードは次のような形です。

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3162.1163783927063!2d126.97423717507674!3d37.57587717203614!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357ca37454f683b1%3A0xfa19c5217c6a0bc0!2sGwanghwamun%20Gate!5e0!3m2!1sen!2sus!4v1714241263073!5m2!1sen!2sus" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

iframeは、別のWebサイトの内容を自分のサイト内に表示するための埋め込みコードです。先ほど作ったカスタムHTMLのスペースにこのコードを貼り付ければ、地図の埋め込みは完了です。

Kakao Mapの埋め込みコードを取得する

Kakao Mapでも埋め込みコードを取得できます。光化門を検索した後、場所マーカー上部にある拡大ボタン（＋アイコン）をクリックします。

すると、HTMLタグをコピーできるメニューが表示されます。

下の画像の手順に従ってください。WordPressに地図を埋め込む場合は、ユーザーが移動やズームを使えるように「一般地図」ソースを選ぶのがおすすめです。

まとめ

今回は、GoogleマップとKakao MapをWordPressに埋め込む方法を説明しました。同じ考え方を使えば、Naver Mapも比較的簡単に埋め込めるはずです。

관련 글 보기