wordpressで地図（グルメマップ）を自動作成！GoogleMapsAPI 大山グルメマップ！

このブログでは飲食店のグルメレポートを書いています。お店ごとに点数（レビュー）をつけて勝手に評価をしてきました。

仕組みはこちらの記事にて紹介しております。
wordpressを使ったレビューサイトの構築

これまで板橋区の大山界隈を中心にレポートを書いてきましたが、結構な数のお店に訪問できたのでwordpressとGoogleMapsAPIを使って、訪問したお店の地図を作ってみようと思います！
毎回手動でGoogleMAPに情報を書くのはしんどいので、記事を書くと勝手に地図が出来上がっていく自動化された仕組みを作ります。さらに単純な地図を作るだけでは寂しいので、地図にはお店写真とレビュー点数を表示させるようにしてみたいと思います。

果たしてどのぐらいのお店に行ったのでしょうか！？

おおまかな地図の作り方です。

1. wordpressの記事投稿時にお店の住所を登録
2. データベース(mysql)から住所一覧ファイルを作成
3. GoogleMapsAPIを使って住所一覧ファイルから地図を作成

では作ってみましょう！！

１.wordpressの記事投稿時にお店の住所を登録

お店のレビュー記事を書き、記事と一緒にお店の住所をデータベースに登録できるようにします。以前紹介させて頂いた方法ですが、カスタムフィールドを使用して住所をデータベースに登録します。
これで記事と一緒に住所がデータベースに登録できるようになります。方法はこちらの記事で紹介させて頂いております。

２．データベース(mysql)から住所一覧ファイルを作成

GoogleMapsAPIで使用するための、住所の情報が格納されたファイルを作成します。ファイルの形式は何でもよいですが、JavaScriptで扱うのでjsonにしました。データの取得方法ですが、wordpressで投稿した内容はデータベース(mysql)に格納されますので、プログラムでアクセスして情報を取得するようにします。このブログは多頻度に更新されるわけではないので、１日１回程度自動バッチにてファイルを作成するようにしました。

バッチプログラムの処理の流れ

• データベースに接続して住所が登録されたカスタムフィールド一覧を取得
  カスタムフィールドはpostmetaテーブルに情報が入っています。
• 住所から座標（経度、緯度情報）をYahoo!ジオコーダAPIを使って取得
  ジオコーダAPIはGoogleもありますが、色々と制約がありそうなのでYahoo!ジオコーダAPIを使いました。
  住所から座標が簡単に取得できます。
• 取得した情報をまとめてJSONファイルに出力
  ＪＳＯＮのフォーマット：住所の座標、記事のＩＤ、店名、サムネイル、評価、カテゴリ
  出力パス：/map/parts/data.js

サンプルプログラムです。createMapData.pl
これで住所情報を集めたjsonファイルが用意できました。

３．GoogleMapsAPIを使って住所一覧ファイルから地図を作成

地図ページを作成します。GoogleMapsAPIを使い住所一覧ファイルからお店の地図を作成します。地図はwordpress上に埋め込んでもよいですが、独自にページを作った方が楽なので専用のHTMLとJavascriptを用意しました。

・htmlページ　/map/map.html
・JavaScript　/map/parts/map.js
・jsonファイル /map/parts/data.js

技術的な内容は次回、別の記事に書きたいと思います。

作成のポイント

• jsonファイルから地図を作成する
  お店の位置にマーカーを立てる
• お店はカテゴリごとに表示アイコンを変える
• マーカー押下時に情報ウィンドウを表示
  お店の写真とお店の記事へのリンクを表示
• レスポンシブに対応する
• サイドバーに大山グルメランキングを表示
  押すと、該当の位置に地図が移動するようにする
• カテゴリで絞込ができるようにする
• 記事から遷移した場合は、初期位置を該当のお店とする

これで大山グルメマップの完成です。書いたグルメレポートが地図に自動反映されるようになりました！

せっかくなので専用のバナーも作りました！実際のページは下記バナーをクリックするとページに遷移します。是非見てください。

めでたし、めでたし・・・

４．まとめ

今回はwordpressとGoogleMapsAPIでグルメマップを作りました。同様に神社巡りや、観光地巡り、不動産の紹介などなど、wordpressの記事の内容により、様々な地図を作ることが簡単にできるので面白いと思います。