WordPressで記事に地図を埋め込む2つの方法を解説!Googleマップを記事に挿入しよう

こんにちは、ユウトです。

今回は、WordPressの記事にGoogleマップなどの地図を挿入する方法について解説します。飲食店、観光スポット、イベント開催場所などに関する記事を書く際には、Googleマップが記事に表示してあると、わざわざGoogleを立ちあげなくても、すぐに周りの建物や駅などの情報を把握できるので、検索者にとっては非常に有難いと言えます。

そこで、本記事では、WordPressの記事にGoogleマップを表示させる方法についてまとめておきます。

WordPressの記事に地図を挿入する2つの方法

WordPressの記事で地図を表示させる方法としては、次の2通りのやり方があります。

  1. 地図コードを貼り付ける
  2. プラグインを使う

では、順番に説明していきます。

1.地図コードを貼り付ける

1つめのやり方としては、Googleマップで地図コードを取得し、それをWordPressテキストモードで所定の位置に貼り付けるという方法です。

例えば、東京タワーの地図コードを取得し、本記事に挿入してみます。まずは、Googleマップで”東京タワー”と入力して検索します。

そして、左上の赤枠で囲んだメニューバーをクリックしましょう。

東京タワー

すると、以下のようにメニューが表示されるので、赤枠の”地図を共有または埋め込む”の項目をクリックします。

地図の共有または埋め込むボタン

そして、右側の”地図を埋め込む”ボタンをクリックします。

すると、中央に地図コードが表示されるので、これをコピーしてWordPressに貼り付けてます。ここで、左上の”中”と書かれた項目を選択すると、小、中、大、カスタムサイズのいずれかを選択できるプルダウンが出現するので、お好みのサイズを選択してください。

地図コード

以下のように、カスタムサイズを選択すると、自分の好きなサイズに設定できます。今回は、中を選択しました。

カスタムサイズ

そして、コードをコピーしたら、後はWordPressをテキストモードにして、目的の場所へとコードをコピペします。

地図コードの挿入

すると、以下のように地図が表示されます。

これで、地図の挿入が完了しました。

2.プラグインを使う

次に、プラグインを用いて、記事に地図を挿入する方法について解説します。地図を表示させるプラグインとしては、simple-mapがよく使われるので、今回はこのプラグインをインストールします。

以下の画像のように、WordPressの管理画面のプラグインの項目を選択し、プラグインの新規追加により、simple-mapをインストールします。

シンプルマップのプラグインをインストール

そして、プラグインの有効化ボタンをクリックします。

プラグインの有効化

このプラグインは、WordPressの記事投稿時にテキストモードで、挿入したい位置にショートコードを入力するだけで、地図を表示させることができるすぐれものなのです。

ショートコードとは、以下のような文字列であり、最初の””の間に対象となる建物などの住所を記述し、その後ろのwidthとheightで横と縦のサイズを調整できます。

ショートコード

 

上の画像のように、””の間に東京タワーの住所を挿入すると、以下のように地図が表示されます。ショートコードを入力する際には、赤線部に半角スペースを入れてください。

東京都港区芝公園4丁目2−8

このように、プラグインを用いて地図を表示させる方法もあります。



コメントを残す

サブコンテンツ

このページの先頭へ