地図上に複数マーカーを表示「Basic Google Maps Placemarks」

2021 8/15

2021.08.15

このプラグインは最終更新が4年前で、WordPressの最新3回のメジャーリリースに対してテストされていません。

参考程度に留めていただいた方が無難ではないかと思います。

記事の内容（もくじ）

使い勝手の良いマップのプラグイン

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

Basic Google Maps Placemarks

地図上に複数のマーカーを表示できます。
マーカーは任意の画像を指定できます。
表示する範囲や地図の中心を指定出来ます。
同一カテゴリーだけのページなども作れます。
入力した地図データをリスト表示できます。
cssを少しいじればレスポンシブにできます。
情報ウィンドウに画像を入れられます。

インストール

STEP

プラグイン新規追加

検索窓に「Basic Google Maps Placemarks」

STEP

インストール

同じ画面上で「インストール」ボタンをクリック

STEP

有効化

同じ画面上で「有効化」ボタンをクリック

「API Key」の取得と設定

「Maps API Key」と「Geocoding API Key」の設定が必須なので、まずその取得から…。

API Keyの取得は、下記のサイトを参考にしました。

Google Maps の APIキーを簡単に取得する »

ただ、Geocoding API Keyの方がエラーを出し続けて…。

「キーの制限」の設定を「HTTPリファラー（ウェッブサイト）」にし、サイトのパスをどのように設定（他サイトからもヒントを得つつ）しても、エラーをはきます。

なので、現在は「なし」を選択して動作させています。

動作しているMaps API Keyと同じ設定にすれば良いと思いますが、ナゼか上手くいきません。

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]

リストもマップ同様、カテゴリーでくくることができます。

上の画像は「屋内施設」「屋外」「公園」それぞれのカテゴリーで表示した例です。

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

よかったらシェアしてね！

URLをコピーする

URLをコピーしました！