1. プラグイン
  2. Simple Map(Googleマップ埋め込みプラグイン)

Simple Map(Googleマップ埋め込みプラグイン)

GoogleマップをWordPressのサイトへ簡単に埋め込みできるプラグイン、「Simple Map」を紹介します。幅と高さの指定や、レスポンシブデザインに対応した地図を埋め込みなどができます。

Googleマップの埋め込みが簡単&便利に!Simple Map プラグイン

Googleマップを表示させる方法で紹介しましたが、Googleマップには専用のコードをコピー・貼り付けするだけで地図を埋め込む機能があります。

ただ、この方法には以下の欠点があります。

  1. 地図をいくつも埋め込むには手間がかかる
  2. 大きい地図が画面に入りきらない
  3. 地図が画面スクロールの妨げになる

欠点①
地図をいくつも埋め込むには手間がかかる

GoogleマップをWordPressのサイトに埋め込むためには、

  1. 目的の地図を表示させる
  2. 埋め込みコードをコピーする
  3. 記事編集画面で貼り付ける

という手順が必要です。1つや2つの地図ならいいですが、たくさんの地図を埋め込む場合、この手順を繰り返すのは面倒です。

欠点②
大きい地図が画面に入りきらない

下の地図は、パソコンでの表示時に見やすいようにと、中サイズ用の埋め込みコードを利用したものです。もし、あなたがスマートフォンで縦長の画面でご覧になっていたら、画面からはみ出してしまってはいないでしょうか。

欠点③
地図が画面スクロールの妨げになる

もしあなたがマウスを利用しているなら、画面をスクロールしたいときマウスホイールをコロコロと転がしませんか?

ためしに、この位置からマウスホイールを下向きに転がしてみてください。マップ上にカーソルが来ると、地図の縮尺が変わるばかりでうまくスクロールできないのではないでしょうか。


ここまで、Googleマップ埋め込み機能の欠点を見てきましたが、これらをすべて解決するのが「Simple Map」プラグインです。

Simple Map プラグインの使い方

ここからは、Simple Map プラグインの導入方法と基本的な使い方を紹介します。

Simple Map プラグインのインストール・有効化

Simple Map プラグインはWordPress プラグインディレクトリに登録されています。管理画面の[プラグイン]>[新規追加]で、「Simple Map」というキーワードで検索してインストール・有効化することができます。

Simple Map プラグイン

プラグインのインストール・有効化について、くわしくはプラグインの使い方(インストール・有効化)をご覧ください。

Google Maps APIキーの設定

Simple Map プラグインを有効化すると、管理画面上部につぎのメッセージが表示されます。[設定ページ]のリンクをクリックします。

Simple Map 有効化後のメッセージ
Simple Map 有効化後のメッセージ

Simple Map プラグインは「Google Maps API」というサービスを利用しています。2016年6月から、Google Maps APIを利用するにはAPIキー(認証情報)の取得が必須となりました。APIキーを取得するには、Googleアカウントが必要です。

設定ページにある解説を参考にしてAPIキーを取得し、[Set API Key]に入力して、変更と保存をクリックします。

Google Maps APIキーの設定手順
Google Maps APIキーの設定手順

下のメッセージが表示されたら、Google Maps APIキーの設定が完了です。

Google Maps APIキー 設定完了

Simple Map プラグインの基本的な使い方

Simple Map プラグインを利用して地図を表示させるには、ショートコードを使います。ショートコードとは、短いコードを記述して特定の動作を実現する機能です。

以下に紹介するショートコードを、WordPressの投稿(または固定ページ)の編集画面で入力するだけで、目的地の地図を表示できます。

基本のショートコード

基本となるショートコードは、次のように記述します。

または、

[東京駅]の部分には、住所・所在地も記述できます。

このショートコードを編集画面で入力し、プレビュー画面で確認してみます。

Simple Mapショートコード入力・プレビュー確認

きちんと、目的地の地図が表示されました。

目的地の地図が表示された
目的地の地図が表示された

上記ショートコードの[東京駅]の部分を変更するだけでその場所の地図を表示できるので、わざわざGoogleマップにアクセスして埋め込みコードをコピーするという手間を省くことができます

幅と高さを指定する

Simple Map プラグインの初期値では、地図の幅が100%、高さが200pxに指定されています。これらの値を、任意のサイズに変更することができます。たとえば、幅を400px、高さを300pxに変更するには、次のように記述します。

または、

あなたがWordPressで利用しているテーマがレスポンシブデザインに対応しているなら、幅の単位を[px]ではなく[%]で指定するといいでしょう。スマホやタブレットなど、さまざまな端末で適切なサイズの地図を表示することができます

地図を画像化する

Simple Map プラグインを利用して表示させた地図は、マップ上でマウスホイールを転がしても縮尺は変わりません。下の地図で試してみてください。

東京駅

また、Simple Map プラグインでは、横幅が320px以下の端末で開いたとき、地図を画像化(Google Static Maps)して表示します。この横幅の値を、任意のサイズに変更することができます。

たとえば、横幅768px以下のときに地図を画像化するには、次のように記述します。

または、


ここまでご紹介したSimple Map プラグインの機能で、冒頭の「Googleマップ埋め込み機能の欠点」をすべてカバーできていることにお気づきでしょうか?他にも便利な機能があります。

倍率を変更する

初期値の倍率は[16]ですが、任意の値に変更できます。たとえば、[20]に変更するには、次のように記述します。

または、

吹き出しを表示する

目的地の上部に吹き出しを表示し、メッセージを記述することができます。次の例を参考にしてください。

最寄りの駅はこちらです

道順案内付きの地図は表示できない

Googleマップには、出発地から目的地までの道順(ルート)を表示する機能があります。Simple Map プラグインでは、道順案内付き地図の埋め込みには対応していません(2016年9月現在)。

Googleマップ ルート案内機能
Simple Mapでは、道順案内付きの地図は表示できない

ルート案内付きの地図を埋め込むには、Googleマップを表示させる方法で紹介した方法を参考にしてください。

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。