永遠少年症候群

永遠少年症候群

Google Maps API&wordpressでマッピング

 タイトル通り、wordpress上に記事追加していくことでGoogle Maps APIを利用してマッピングしていくという感じ。
 完全に身バレするんでお見せできないが、私が作ることになったのは地元の市内のお店や観光地を全部記事にして地図上に示すというもの。まぁ、ググればバレそうだけど……。行政の観光サイトか参考サイトみたいなお店マップ以外に需要を感じないが、各種アーカイブや検索結果が地図上に一気に現れるのはなかなかいい。

地図表示

 とりあえず、表示してみよう。
 そこらへんはGoogle Maps JavaScript API | スタートガイドが十分詳しいしコピペでできる。APIをとる必要があるので、ついでにとるといいと思います。

カスタムフィールド

 wordpressで表示する場合、カスタムフィールドで経度・緯度の入力をできるようにしておくことが重要。
 通常の投稿でもカスタム投稿でもいける。今回は、それぞれ緯度を’Map_lat’、経度を’Map_lng’というフィールド名にしています。

複数マーカー

 こちらの参考サイトを見てもらうとわかる通り、表示したいマーカーが複数ある場合はマーカーの情報を配列に入れ、forで呼び出す。
 今回やるのは、wordpressのループ(phpのwhile)でマーカーの配列を入れ、それをjavascriptのforで呼び出すというもの。javascriptの中でphpって使えるのね。初めて知ったわ。

 カスタム投稿の場合、have_post()にポストタイプの条件など入れるだけ。7-8行目を以下に変更します。アーカイブページや検索結果ページではwhileの前にif使った方がいいけど、まぁ最初の一覧ならいらんでしょう。

 情報ウィンドウを付け足す場合は、参考サイトのメインの内容なのでそちらを参考にしてください。ただ、ウィンドウの中身を記事へのリンクにするならループの中でウィンドウの中身を指定する方がいいですね。

カテゴリごとにマーカー色を変える

 これだけじゃあれなんで……。
 マーカーは用意されているシンボルに変更したり、画像にしたり、簡単なSVGにしたりできます。マーカーを丸にして、カテゴリーごとに色を変えるには以下のようになります。

参考サイト

Google Maps API | WordPressとプラグインを使ってお店紹介サイトを作る方法東池袋カレーマップ – 「wordpressでできるんかなぁ?」と思って検索したら「作ってる」っていう先人。残念ながら記述が古い。
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる | tips note by TAM – 複数マーカーの参考にしました。
Google Maps JavaScript API | Google Developers

まとめ

 複数の投稿タイプを使って全然違う種類の情報を載せたりといったこともできるので、使い道がとにかく広がっていく。