GoogleマップをWordPressのサイトへ簡単に埋め込みできるプラグイン、「Simple Map」を紹介します。幅と高さの指定や、レスポンシブデザインに対応した地図を埋め込みなどができます。
Googleマップの埋め込みが簡単＆便利に！Simple Map プラグイン
Googleマップを表示させる方法で紹介しましたが、Googleマップには専用のコードをコピー・貼り付けするだけで地図を埋め込む機能があります。
ただ、この方法には以下の欠点があります。
- 地図をいくつも埋め込むには手間がかかる
- 大きい地図が画面に入りきらない
- 地図が画面スクロールの妨げになる
欠点①
地図をいくつも埋め込むには手間がかかる
GoogleマップをWordPressのサイトに埋め込むためには、
- 目的の地図を表示させる
- 埋め込みコードをコピーする
- 記事編集画面で貼り付ける
という手順が必要です。1つや2つの地図ならいいですが、たくさんの地図を埋め込む場合、この手順を繰り返すのは面倒です。
欠点②
大きい地図が画面に入りきらない
下の地図は、パソコンでの表示時に見やすいようにと、中サイズ用の埋め込みコードを利用したものです。もし、あなたがスマートフォンで縦長の画面でご覧になっていたら、画面からはみ出してしまってはいないでしょうか。
欠点③
地図が画面スクロールの妨げになる
もしあなたがマウスを利用しているなら、画面をスクロールしたいときマウスホイールをコロコロと転がしませんか？
ためしに、この位置からマウスホイールを下向きに転がしてみてください。マップ上にカーソルが来ると、地図の縮尺が変わるばかりでうまくスクロールできないのではないでしょうか。
ここまで、Googleマップ埋め込み機能の欠点を見てきましたが、これらをすべて解決するのが「Simple Map」プラグインです。
Simple Map プラグインの使い方
ここからは、Simple Map プラグインの導入方法と基本的な使い方を紹介します。
Simple Map プラグインのインストール・有効化
Simple Map プラグインはWordPress プラグインディレクトリに登録されています。管理画面の[プラグイン]＞[新規追加]で、「Simple Map」というキーワードで検索してインストール・有効化することができます。
Google Maps APIキーの設定
Simple Map プラグインを有効化すると、管理画面上部につぎのメッセージが表示されます。[設定ページ]のリンクをクリックします。
設定ページにある解説を参考にしてAPIキーを取得し、[Set API Key]に入力して、をクリックします。
下のメッセージが表示されたら、Google Maps APIキーの設定が完了です。
Simple Map プラグインの基本的な使い方
Simple Map プラグインを利用して地図を表示させるには、ショートコードを使います。ショートコードとは、短いコードを記述して特定の動作を実現する機能です。
以下に紹介するショートコードを、WordPressの投稿(または固定ページ)の編集画面で入力するだけで、目的地の地図を表示できます。
- ショートコードに使用する[ ]について
- これから紹介するショートコードのサンプル(末尾に※が付いたコード)には、都合上、全角の［ ］を使用していますが、実際に記述する際は半角の[ ]を使用してください。
基本のショートコード
基本となるショートコードは、次のように記述します。
- ［map addr=”住所・所在地、施設名など”］
または、
- ［map］住所・所在地、施設名など［/map］
例として、東京駅のマップを記事内に挿入してみましょう。ショートコード
［map］東京駅［/map］
を編集画面で入力し、プレビュー画面で確認してみます。
きちんと、目的地の地図が表示されました。
上記ショートコードの「東京駅」の部分を変更するだけでその場所の地図を表示できるので、わざわざGoogleマップにアクセスして埋め込みコードをコピーするという手間を省くことができます。
幅と高さを指定する
Simple Map プラグインの初期値では、地図の幅が100%、高さが200pxに指定されています。これらの値を、任意のサイズに変更することができます。たとえば、幅を400px、高さを300pxに変更するには、次のように記述します。
- ［map addr=”東京駅” width=”400px” height=”300px”］［/map］
または、
- ［map width=”400px” height=”300px”］東京駅［/map］
あなたがWordPressで利用しているテーマがレスポンシブデザインに対応しているなら、幅の単位を[px]ではなく[%]で指定するといいでしょう。スマホやタブレットなど、さまざまな端末で適切なサイズの地図を表示することができます。
地図を画像化する
Simple Map プラグインを利用して表示させた地図は、マップ上でマウスホイールを転がしても縮尺は変わりません。下の地図で試してみてください。
また、Simple Map プラグインでは、横幅が320px以下の端末で開いたとき、地図を画像化(Google Static Maps)して表示します。この横幅の値を、任意のサイズに変更することができます。
たとえば、横幅768px以下のときに地図を画像化するには、次のように記述します。
- ［map addr=”東京駅” breakpoint=”768px”］［/map］
または、
- ［map breakpoint=”768px”］東京駅［/map］
ここまでご紹介したSimple Map プラグインの機能で、冒頭の「Googleマップ埋め込み機能の欠点」をすべてカバーできていることにお気づきでしょうか？他にも便利な機能があります。
倍率を変更する
初期値の倍率は［16］ですが、任意の値に変更できます。たとえば、［20］に変更するには、次のように記述します。
- ［map addr=”東京駅” zoom=”20″］［/map］
または、
- ［map zoom=”20″］東京駅［/map］
吹き出しを表示する
目的地の上部に吹き出しを表示し、メッセージを記述することができます。次の例を参考にしてください。
- ［map addr=”東京駅” infowindow=”open”］最寄りの駅はこちらです［/map］
道順案内付きの地図は表示できない
Googleマップには、出発地から目的地までの道順(ルート)を表示する機能があります。Simple Map プラグインでは、道順案内付き地図の埋め込みには対応していません(2016年9月現在)。
ルート案内付きの地図を埋め込むには、Googleマップを表示させる方法で紹介した方法を参考にしてください。
