【初心者向け】WordPressの記事内にGoogleマップの地図を埋め込む方法|Simple Mapの設定と使い方

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

こんにちは、きゃぷてんです。

ブログを運営していると、イベント等の話題を扱うことがあると思います。

その際に、会場の情報として住所のみを記載しているサイトをよく見ますが、ユーザー目線で考えるとアクセスのイメージを沸かせるためにも、会場の場所を地図で見たいわけです。

そんな時は、今回ご紹介する「Simple Map」というプラグインを利用すると、住所情報だけで簡単にGoogleマップの地図を記事内に埋め込むことができますので、ぜひ導入して見てください。

ユーザーの利便性が向上する他にも、記事内に地図が埋め込まれていると、Web知ってます感が出てなんだかかっこいいので(笑)

Simple Mapとはどんなプラグインなの?

まずは、Simple Mapとはどんなプラグインなのかを説明します。

ひとことで言うとすれば、住所情報だけで記事内にGoogleマップの地図を埋め込むことができるプラグインと説明することができますね。

百聞は一見にしかずと言うことで、さっそく「Simple Map」の実力を見て見ましょう!

”東京都墨田区押上1丁目1−2”

 

上の地図では「東京スカイツリー」の場所を表示してみました。

記事内にこのような地図が埋め込まれていると、訪問者は場所のイメージがつきやすくなるので非常にありがたい情報と言えます。(ユーザビリティの向上)

また、こちらは僕の自己満足ですが、記事内に地図が埋め込んであるとWeb知ってます感を演出できて記事作成の意欲が向上します(笑)

使い方はとても簡単で、Simple Mapを導入するとショートコード(自分はプログラミンをしなくてもWordPressが勝手にプログラミングをしてくれる機能)が使えるようになります。

そのため、僕がやったことは「ショートコードの貼り付け」と「住所の入力」の2つだけです。

とても簡単ですよね、ちなみに使ったショートコードがこちらです。

[map addr=”東京都墨田区押上1丁目1−2” width="100%" height="400px"][/map]

これを記事内に入力するだけで、上記のような地図を埋め込んでくれるので非常にありがたいです。

また、Simple Mapには他にも以下のような機能が実装されていますので、これらを使いこなすことができれば、あなたのブログは1つ格上のブログへと成長することでしょう。

  • 地図サイズの変更
  • 地図のレスポンシブ対応
  • 地図の画像化
  • 地図倍率(縮尺)の変更
  • 地図上にメモ書きを追加

こんな感じで地図表示のための便利な機能が揃っているプラグインというわけです。(それぞの機能の使い方については後述しますね)

Simple Mapを導入するメリット

Simple Mapを導入するメリットは以下になります。

  • 住所情報だけで簡単に記事内に地図を埋め込める
  • 地図のサイズや倍率などカスタマイズが簡単
  • スマホ表示の場合、自動で地図を画像化する

プラグインが使いやすいとか、カスタマイズが簡単だとかありきたりなものもありますが、僕が注目しているのは「スマホ表示の場合、自動で地図を画像化する」という部分です。

スマホで調べものをしていた時に「ページをスクロールしようとしたら地図だけ動いてイライラした」という経験があると思います。

ただ、地図が画像であればそんなイライラを感じさせることはありませんし、それを自動でやってくれるので非常に便利なプラグインです。

Simple Mapをインストール

プラグインのインストール方法については下の記事で紹介していますので、参考にしてください。

WordPressにプラグインを追加する方法【超簡単に導入できるよ!】

2016.10.14

なお、検索ワードは「Simple Map」と入力し、下図を目印にしてくださいね。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

インストールが完了したら「有効化」をクリックしてください。

Simple Mapの設定と使い方

Simple Mapを有効化にしたら、設定を行なっていきましょう。

設定では「GoogleMap APIを取得」と「ショートコードの調整」の2を実施しますが、それぞれ非常に簡単な操作なので安心してくださいね。

GoogleMap APIを取得

WordPressの管理画面を開いたら、「設定」→「Simple Map」の順に操作して、Simple Mapの設定画面を表示させます。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

Simple Mapの設定画面を表示させたら、「APIキー取得方法」という項目の「Google Maps APIs for Web page.」をクリックし、GoogleマップのAPI取得ページへ移動します。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

API取得ページに移動したら「キーの取得」→「My Project」→「NEXT」の順に操作しましょう。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方 WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

しばらくするとAPIが表示されるので、表示されているAPIをコピーします。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

APIをコピーしたら、Simple Mapの設定画面に戻り「Set API Key」の部分に、先ほどコピーしたAPIを貼り付けます。

APIを貼り付けたら「変更を保存」をクリックして設定を反映させましょう。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

以上で、GoogleMap APIの取得が完了しました。

ショートコードの調整

実は、この時点でGoogleマップの地図を埋め込むことは可能なのですが、今後なんども地図を埋め込むことを考えた場合、ショートコードの雛形を作っておくと便利です。

例えば、下のような文字列をメモ帳に入力してデスクトップ画面に置いておいても良いですし、AddQuicktag等のプラグインを使って、一発入力できるようにしてくと作業効率が向上しますのでおすすめです。

[map addr=”ここに住所” width="100%" height="ここに高さ(px)"][/map]

任意のショートコードやHTMLタグを、一発入力できるようにする便利なプラグインである「AddQuicktag」の使い方については、下の記事を参考にしてください。

WordPressのテキストモードにタグを追加するAddQuicktagの設定方法と使い方【記事作成を効率化しよう】

2018.01.08

以上で、設定が完了したのでいつでも地図を表示できるようになりました。

地図を表示する

それでは、記事内に地図を表示させましょう。

WordPressの記事作成画面で「テキストモード」を選択し、以下のショートコードを貼り付けてみてください。

[map addr=”東京都墨田区押上1丁目1−2” width="100%" height="400px"][/map]
WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

すると、この記事の冒頭にあったような「スカイツリー周辺の地図」を記事内に表示することができました。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方
補足説明

Simple Mapで表示する地図のサイズは、デフォルトで横100%、縦200pxとなっています。

記事作成中、自分が指定したサイズとは違い、デフォルトサイズの地図が表示されてしまう場合がごくたまにありますが、その時は、記事内のショートコードを削除し、もう一度ショートコードを入力すると、指定したサイズの地図が表示されるようになります。

地図の倍率(縮尺)を変更する

地図の倍率(縮尺)を変更することができます。

ここにスカイツリーがあるよ!

 

上の地図のように倍率(縮尺)を変更する場合は、以下の雛形を使ってください。

[map addr=”住所” width="100%" height="ここに高さ(px)" zoom="ここに数字"][/map]

ちなみに、上の地図ではzoomの部分に「14」と入力しています。(デフォルトの倍率は「16」に設定されています)

地図上にメモ書きを追加する

地図上のポイントの部分にメモ書きを追加することができます。

下の地図のポイント部分(赤いピン)をクリックすると「スカイツリーの高さは634mだよ!」と表示されるのでクリックしてみてください。

スカイツリーの高さは634mだよ!

 

上記のように、地図上にメモ書きを追加したい場合は、以下のようなショートコードを記述してください。住所やメッセージ部分をお好みのもに変更してくださいね。

[map addr=”住所” width="100%" height="ここに高さ(px)"]ここにメッセージ[/map]

まとめ

以上がSimple Mapの設定と使い方です。

地図を扱う機会は結構ありますので、今後重宝するプラグインだと思います。

最初はちょっと面倒ですが、一度設定してしまえば次回から地図の挿入がとても楽にできますので、ぜひSimple Mapを導入してみてください。

WordPress Googleマップ 地図 埋め込む方法 Simple Map 設定 使い方

あなたのシェアが僕の笑顔の源です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

きゃぷてん

アフィリエイトは副業でやってます。「まったり自由に生きる」がモットーなのでブログ名をliberty-life-blogにしました。 <趣味> 汚い居酒屋探し、フットサル、お散歩、筋トレ <特技> 足首を無限にポキポキ鳴らせます。