MENU

地図上に沢山のマーカーを表示できる「Basic Google Maps Placemarks」プラグイン

2020 3/22
目次

「API Key」の設定

2017.9.8 追記

Basic Google Maps Placemarks

Googleマップの使用ルールの変更で、以前の案内だけでは動作しなくなりました。
「Maps API Key」と「Geocoding API Key」の設定(取得)が必須です。

API Keyの取得は、下記のサイトを参考にしました。
Google Maps の APIキー を簡単に取得する »

ただ、Geocoding API Keyの方がエラーを出し続けて…。
「キーの制限」の設定を「HTTPリファラー(ウェッブサイト)」にし、サイトのパスをどのように設定(他サイトからもヒントを得つつ)しても、エラーをはきます。

なので、現在は「なし」を選択して動作させています。
動作しているMaps API Keyと同じ設定にすれば良いと思いますが、ナゼか上手くいきません。

使い勝手の良いマップ

これまでいくつかGoogleマップを取り込むプラグインを紹介しましたが、正真正銘、簡単で安定していて使い勝手の良いプラグインを見つけたので紹介します。

Basic Google Maps Placemarks »
※プラグイン → 新規追加 →(検索窓)Basic Google Maps Placemarks → インストール → 有効化

Basic Google Maps Placemarks

・地図上に複数のマーカーを表示できます。

・マーカーは任意の画像を指定できます。

・表示する範囲や地図の中心を指定出来ます。

・同一カテゴリーだけのページなども作れます。

・入力した地図データをリスト表示できます。

・cssを少しいじればレスポンシブにできます。

・情報ウィンドウに画像を入れられます。

Basic Google Maps Placemarksの設定

設定画面

左サイドバー → 設定 → 「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]
 …情報を地図ではなく、テキストでリスト表示。

1つの情報で地図とリストが出来るのがとても便利。情報がそれほど多くなければ、地図とリストを同じページの上下に置けば、便利かもしれません。

マッシュアップ地図の入力はどのプラグインでも結構面倒だったのですが、「Basic Google Maps Placemarks」は本当にストレスなく作業できます。

目次
目次
閉じる