高機能有料テーマ「Avada」を使ってみる【番外編:MapをPlug-in】

投稿日: カテゴリー: Plug-in, Wordpress

Plug-in:Basic Google Maps Placemarksを使ってみる。

インストールの手順は所謂プラグインのそれ。
公式で「Basic Google Maps Placemarks」と検索すれば直ぐ見つかる。それなりに人気のプラグイン。
問題は設定方法。APIキーが必要になるので手順にそって入手をする必要がある。

設定ページにはこうある。

WARNING: You have not configured API keys for the Google Maps and Geocoding services.
This plugin often works without them, but as of June 2016, Google appears to be enforcing their API key requirement more aggressively than they have in the past. If you do not configure API keys, then the map may not work, or may stop working in the future without notice.
To obtain the keys, first get a Maps API Standard/Browser key, and then get a Geocoding API Standard/Server key. Paste both keys into the fields below.

要約するとこういう意味。

警告:あなたは、GoogleマップとジオコーディングサービスのAPIキーを設定していません。
このプラグインは、多くの場合、それらなしで動作しますが、2016年6月の時点で、Googleはより積極的に、彼らが過去に持っているよりも、APIキーの要件を強制しているように見えます。あなたは、APIキーを設定しない場合、マップが動作しない可能性があり、予告なく、将来的に作業を停止することがあります。
キーを取得するには、最初にMaps APIの標準/ブラウザのキーを取得してから、ジオコーディングAPI標準/サーバーキーを取得。以下のフィールドに両方のキーを貼り付けます。

どこで取得するかは、テキストにリンクがはってあるのでそちらで。
取得にはGoogle IDでログインしなければならない。アカウントをあらかじめ取得しておくこと。

取得すべきAPIキーと順序は…
1.最初に「Google Maps JavaScript API」を取得
2.次に「Google Maps Geocoding API」を取得

同一プロジェクトで使用するので同一プロジェクトでそれぞれを取得すればよい。
最初に、My Projectを作れと言われるので新規でプロジェクトを作成し、そこにAPIキーを取得登録していく感じ。

それぞれのAPIキーを入力できたら、細かな設定。
因みに、サイズ以外と地図の中心だけはデフォルトでいってみる。

地図の中心を入力する欄には、

You can type in anything that you would type into a Google Maps search field, from a full address to an intersection, landmark, city, zip code or latitude/longitude coordinates.
あなたは、完全な住所から交差点、標識、都市、郵便番号または緯度/経度の座標まで、Googleマップの検索フィールドに入力するものを入力できます。

とある。因みにアドレス入力も日本語でいけるが、入力値に癖があるようなので、あらかじめ中心にしたい場所をGoogle Mapで調べ、そこに表示されている住所をコピペしてみた。

あとはカスタム投稿として「Placemark」が追加されているので、場所の名前と吹き出しにでる文言(HTML)、あとは住所入力欄に表示したい住所を入力するだけ。
表示させたい投稿欄にショートコードを書き込めばOK。

因みにただ地図を表示させたいのであればこのように書く。

 

表示させてみる。

Loading map...

Loading

ショートコードはそのほかに…

■カテゴリーとサイズを指定して表示

■表示する地図の中心位置とズーム、タイプを指定して表示

■情報を地図ではなく、テキストでリスト表示

 

で、リキッドさせたいのでCustomCSSに以下を追加。

どうも外罫に吹き出しがぶつかる。

これで改善可能。