WP Map Markerプラグインデモ

WP Map Markerプラグインのデモサイトになります。
WordPressのデフォルトテーマ Twenty Seventeenを元にグーグルマップを表示しています。

数字のついたマーカー画像(クラスタマーカー)をクリックすると地図をズームします。
数字のついていないマーカー画像(通常のマーカー)をクリックすると情報ウィンドウを表示し、その情報ウィンドウクリックすると該当する投稿のシングルページへ画面遷移します。

マーカーが密集しているエリアでは、クラスタマーカーを表示し、クラスタリングしたマーカーの数を表示します。クリックするとそのクラスタマーカーを中心にズームを行います。
通常のマーカーは、クリックすることでそのマーカーの情報ウィンドウを表示します。情報ウィンドウでは、その投稿のタイトル、投稿内容、アイキャッチ画像(アイキャッチ画像がない場合は投稿内に最初に現れる画像)、所在地を出力します。
試しに日本のマーカーをクリックしてみてください。

WP Map Markerを用いることで、トップページやシングルページに地図とマーカーを設置できるうえに、さらにアーカイブページの条件に合ったマーカーを動的に表示することも可能にします。

同ページにある世界の地域のカテゴリーリストをクリックしてみてください。
それぞれの地域にあったマーカーが表示されることが確認できます。
WordPress標準のアーカイブやWP_Queryを用いた条件ページを利用している場合には動的なマーカー表示が、このプラグインによって実現できます。

このデモサイトはとてもシンプルに作成しております。
(1) WordPress本体とTwenty Seventeenのテーマを元に、各国の投稿データを用意します。肝となる住所には、カスタムフィールド「address」を追加し、首都の名前を保存しています。
(2) WP Map Markerプラグインを有効にします。
(3) 表示される管理画面の専用ページにてAPIに用いるGoogleのAPIキーを設定します。
(4) その後、同プラグインが用意したジオコーディングとクラスタリングボタンを押すだけで地図表示に必要なデータを準備することが出来ます。
(5) 最後にheader.phpに地図表示するコードを一行追加して出来上がりです(デモのようにアーカイブでも用いるならばアーカイブページにも条件を付与するコードを一行追加)。

表示する地図の中心座標や拡大率の調整、マーカーの変更も簡単です。
気になった方はプラグイン操作説明ページにてさらに詳しく確認出来ます。

より少ない労力による実現と、地図のスムーズな操作であなたのアプリケーションをさらにリッチにしましょう!

※Google APIによるジオコーディングでは必ずしも意図した経緯度を取得できるわけではありませんのでここに意図した経緯度が取得できているか確認する必要がございます。

WP Map Markerプラグイン販売ページ

日本

投稿に関する説明になります。WP Map Markerプラグインではマップに表示されているマーカーをクリックすると画像とタイトル、投稿の本文の一部が表示されます。