地図上に複数マーカーを表示「Basic Google Maps Placemarks」
使い勝手の良いマップのプラグイン
これまでいくつかGoogleマップを取り込むプラグインを紹介しましたが、正真正銘、簡単で安定していて使い勝手の良いプラグインを見つけたので紹介します。
- 地図上に複数のマーカーを表示できます。
- マーカーは任意の画像を指定できます。
- 表示する範囲や地図の中心を指定出来ます。
- 同一カテゴリーだけのページなども作れます。
- 入力した地図データをリスト表示できます。
- cssを少しいじればレスポンシブにできます。
- 情報ウィンドウに画像を入れられます。
インストール
検索窓に「Basic Google Maps Placemarks」
同じ画面上で「インストール」ボタンをクリック
同じ画面上で「有効化」ボタンをクリック
「API Key」の取得と設定
「Maps API Key」と「Geocoding API Key」の設定が必須なので、まずその取得から…。
API Keyの取得は、下記のサイトを参考にしました。
ただ、Geocoding API Keyの方がエラーを出し続けて…。
「キーの制限」の設定を「HTTPリファラー（ウェッブサイト）」にし、サイトのパスをどのように設定（他サイトからもヒントを得つつ）しても、エラーをはきます。
なので、現在は「なし」を選択して動作させています。
動作しているMaps API Keyと同じ設定にすれば良いと思いますが、ナゼか上手くいきません。
Basic Google Maps Placemarksの設定
数値と中心位置以外は初期設定で大丈夫。
- Map Center Address…日本語でOK。
- Zoom…表示を確かめながら最適の値を探る。
- Map Width…表示するPCのページのサイズに合わせる。
マップの見栄えを良くするために、プラグイン内のstyle.cssを編集。
レスポンシブにする
#bgmp_map-canvas の幅を「width: 100% !important;」に変更。
情報ウィンドウ内の画像とテキストがくっつくので、画像の右側にスペースを作る
#bgmp_map-canvas img 「margin: 0 4px 0 0;」に変更。
情報ウィンドウと地図情報の入力
プラグインの有効化でサイドバーに「Placemarks」メニューが追加されます。
この編集画面に入力されたデータが、情報ウィンドウに表示されます。
アイキャッチ画像が地図上のマーカーです。
「Stacking Order」は、重なり順をコントロールするメニューです。
初期設定は0なので、複数のマーカーが重なっている場合は、1番下はそのまま、その上を1…というように、上になるほど値を大きくします。
マップの表示画面を作る
地図を表示する
投稿または固定ページの新規画面を開き、地図を読み出すショートカットを追加します。
[bgmp-map]
[bgmp-map categories="parks,restaurants" width="500" height="500"]
[bgmp-map center="chicago" zoom="10" type="terrain"]
リストを表示
情報を地図ではなく、テキストでリスト表示
[bgmp-list]
リストもマップ同様、カテゴリーでくくることができます。
上の画像は「屋内施設」「屋外」「公園」それぞれのカテゴリーで表示した例です。
マッシュアップ地図の入力はどのプラグインでも結構面倒だったのですが、「Basic Google Maps Placemarks」は本当にストレスなく作業できます。
