こんな方に読んで欲しい！
- 自分のwebサイトに地図を載せたい！
- なるべく手間なく、わかりやすい地図を載せたい！
- GoogleマップのAPIキー取得手順が知りたい
例えば、あなたが
- 店舗を持つようなビジネスをされている
- 食べ歩きのブログを書かれている
とします。でも、住所だけだとなかなか場所は伝わりません。ぜひwebサイトに「わかりやすい地図」を載せて、読者の満足度を高めましょう！
今回は、WordPressプラグイン「Simple Map」を徹底解説します！
ここに注意！
このプラグインは最終更新が2年前です。今でも問題なく利用できますが、作成者の更新は止まっていることを前提に利用してください。
1. 「Simple Map」とは
「Simple Map」は、下記のようにショートコードの中に住所を入力するだけで、webサイトにGoogleマップを載せることができるプラグインです。
大阪府大阪市浪速区恵美須東１丁目１８−６
ちなみに、次のように表記してもOKです。お好みでどうぞ。
大阪府大阪市浪速区恵美須東１丁目１８−６
この地図は、実際に Simple Map プラグインを使って表示させています。説明が不要なほど操作がシンプルですよね。
たくさんの地図の掲載が必要な場合でも、作業時間をかけずに地図を載せることができます。
なお、2018年にGoogleの仕様が変更したことにより、「Simple Map」をはじめとする多くのGoogle APIを利用するプラグインは、Google Maps Platformというビジネスアカウントへの登録が必要になりました。この登録方法ももちろん解説します！
ここに注意！
本当は、住所や緯度経度をカッコ（ [ ] ）の中に書き入れる場合、
大阪府大阪市浪速区恵美須東１丁目１８−６
最後の[/map]は必要ないはずなのです。
ただ、この記事では[/map]を書かないと、地図の後の文章が表示されない状態になりました。
いろいろ試してみて、
- 旧エディタのみで記事を書いた場合、[/map] なしでも正常に表示される
- ブロックエディタのみで記事を書いた場合、[/map] なしでも正常に表示される
- ブロックエディタで執筆後、旧エディタで編集すると、[/map] なしだと地図の後の文章が表示されない
ことがわかりました。
もちろん、「旧エディタのみ」「ブロックエディタのみ」で書いた場合も、[/map] があっても問題ありません。そのため、この記事では全てのショートコードに [/map] を付けて表記します。
2. 「Simple Map」の導入方法
「Simple Map」はWordPress公式プラグインなので、「WordPress管理画面>プラグイン>新規追加」 から簡単にインストールできます。
右側のキーワード検索テキストボックスで、スペースを入れずに「simplemap」と検索すると上位にヒットしますので、「今すぐインストール」をクリックし、有効化します。
ここに注意！
「Simple Map」は似たような名前が多いので、作成者の名前まで入れて「simple map Takayuki Miyauchi」で検索すると良いでしょう。
インストール済みプラグイン一覧に「Simple Map」が表示されていれば、インストール完了です。
ここに注意！
このプラグインは初期設定にGoogle APIキーの入力が必要です。Google Maps APIキーは 「WordPress管理画面>設定>Simple Map」から入力します。
3. Google Maps APIキーの取得方法
Simple Mapの設定画面に入力するGoogle Maps APIキーを取得するには、Googleアカウントとは別にGoogle cloud Platformというビジネスアカウントへの登録が必要です。
3-1. Google Cloud Platform とは
Google Cloud Platformとは、アプリやサービスの開発者が、さまざまなGoogle APIを使うことができるビジネスアカウントのことです。Google Maps PlatformもGoogle Cloud Platformの機能の一部で、管理画面はGoogle Cloud Platformに統一されています。
3-2. Google Maps APIキーは有料か無料か？
Google Maps Platformは基本的に有料で1000リクエストにつき一定の利用料がかかりますが、加入から12か月間はひと月当たり$200（約21,000円）の無料使用枠がついていますので実質無料で使えます。
3-3. GoogleマップのAPIキーを取得する手順
ここがポイント！
Google Maps APIを取得するには、アカウント情報の確認のためにクレジットカードか銀行口座を登録する必要がありますが、1年間は無料で使える上、手動で有料アカウントへアップグレードしない限り利用料は請求されません。
Google Maps Platformにアクセスし、右上の「始める」をクリックします。
「請求先アカウントの作成」をクリックします。
「利用規約」にチェックを入れて同意し、「続行」ボタンをクリックします。
すでにGoogle AdSenseなどに支払い情報などの登録がある場合は、広告用プロファイルやお支払いプロファイルが表示されます。
無料トライアルの登録が完了しますので、続いてAPIの有効化の手続きをします。OKをクリックしてから少し時間がかかるので、そのまま待ってください。
利用したいGoogle Maps Platform のサービスを選択します。後から変更ができるので、とりあえず全部選択しておきます。
先ほど選択したサービスに必要なGoogle APIが自動で選択されるので、「有効にする」ボタンをクリックします。
Google Maps Platform のAPIキーが表示されましたので、コピーしておきましょう。
APIキーはGoogle Cloud Platform の「認証情報」からいつでも確認できます。
4. 「Simple Map」の使い方
「Simple Map」は、ショートコードに住所を打ち込めばブログの投稿ページや固定ページなど、どこにでも簡単にGoogleマップを載せることができます。ここでは住所での入力方法とは別の入力方法やオプション指定があるので紹介します。
4-1. 住所を指定する
この記事の最初でも紹介しましたが、「Simple Map」はショートコードの中に住所を入力するだけで表示されます。はさんでもOK。
大阪府大阪市浪速区恵美須東１丁目１８−６
大阪府大阪市浪速区恵美須東１丁目１８−６
4-2. 緯度と経度で地図を指定する
また、住所の代わりに緯度と経度を指定しても地図の表示が可能です。例えばエクセルなどで地図データを緯度と経度で管理している方、カスタムフィールドで緯度経度の情報を入れている方などは、こちらの方が良いでしょう。
4-3. 「Simple Map」のオプション詳細
ショートコード内にオプションコードを入力すれば、地図の幅、高さ、縮尺が指定できます。
4-3-1. 地図の幅を指定する
幅は「割合を示す ％ 」か、「 px（ピクセル）」のどちらでも指定できます。下の例は、幅を60％にしています。
大阪府大阪市浪速区恵美須東１丁目１８−６
4-3-2. 地図の高さを指定する
高さは、px（ピクセル）で指定します。高さの指定だけでも使用できますが、幅と高さ両方を指定することもできます。下の例は、幅を50％、高さを400pxに設定しています。
大阪府大阪市浪速区恵美須東１丁目１８−６
4-3-3. 地図の縮尺を変更する
ショートコードに 「zoom=”16″」 と指定すれば、地図の縮尺を変更できます。「” “」の中は縮尺の度合いを決める値です。なにも指定しなければ、「16」で表示されます。
実際に表示させてみてちょうどよい数字を探してみてください。下の例は、zoom=”8″ で設定しています。
大阪府大阪市浪速区恵美須東１丁目１８−６
4-4. マップマーカーをクリックした時に文字や文章を表示させる
下記のようにコメント部分をショートコードで囲むと、マップマーカーをクリックした時に、そのコメントを表示できます。
通天閣の頂上にはビリケンさんがおわします
5. まとめ
「Simple Map」は、ショートコード内に住所を入力するだけでwebサイトにGoogleマップを載せることができるので、地図を多く載せたい人や、わかりやすい地図を載せたい人に最適のプラグインです。
最初だけGoogle Cloud Platformアカウントの取得が必要ですが、お金もかかりませんし、5分くらいで取得できるので、手間にはならないでしょう。
１点だけ、今でも十分に使えるプラグインですが作成者の更新は止まっていますので、その点だけ注意して使ってください！
[bordercolor=”” bgcolor=”#fafafa” borderwidth=”0″ borderradius=”5″ titleweight=”bold” fontsize=”” myclass=”st-mybox-class” margin=”25px 0 25px 0″]
WordPress「Insert Pages」プラグインの使い方を徹底解説！
イベント予定や定休日を表示・公開できるプラグイン「All-in-One Event Calender」
[/st-mybox]