カフェ記事を書くようになりましたが、記事を見た人にわかりやすく、GoogleMapを表示したほうがいいかもと思い、追加してみました。
その方法についてまとめています。
実は近々仕事で似たようなことをやるかもしれないので、使い勝手の確認も兼ねています。
住所が分かればなんとかなるようにしたい
カフェ記事の最後には、『店舗名・住所・営業時間などの備考』といった店舗情報を書くようにしています。
この情報をそのままカスタムフィールドに追加するだけで、店舗情報の下に地図表示できるようにしたいと思います。
１）『Google Maps API Key』を取得します
Google Maps APIの使用には『API Key』が必要です。また、リクエスト数によっては、有料になるそうです。
取得方法についてはこちらのサイトがとてもわかりやすかったです。
⇒【2018年度版】Google Maps の APIキー を簡単に取得する – ねんでぶろぐ
２）Advanced Custom Fieldsでカスタムフィールドを設定
記事の最後に出力するためのカスタムフィールドを設定します。
今回は使い勝手の良さから『Advanced Custom Fieldsプラグイン（ACF）』を追加。
そして、以下のように設定します。
営業時間や定休日 ⇒ Cafe_Info
地図 ⇒ Cafe_Address
地図のCenterに設定している緯度経度は、投稿画面で表示される地図のCenterです。
デフォルトだとメルボルンになるので、東京駅（緯度：35.681167／経度：139.767052）にしました。
３）「Google Map」フィールドを使うために、API KEYを設定します
「Google Map」フィールドを設定しただけだと、投稿画面でこんな風にエラー表示されます。
使えるようにするため、テーマファイルの「functions.php」に以下を追加します。
{API_KEY}の部分には（１）で取得したAPI Keyをいれてください。
すると、Mapが使えるようになります。
これで、地図を表示するために必要な「緯度」「経度」を取得＆保存することができます。
今回自力で実装しようと頑張って断念した部分でもあります。
クリエイターでなくても、管理しやすいものを〜と考えた結果、これにたどり着きました。
（この件については後述します）
４）個別ページにカスタムフィールドの情報と地図を表示する
各テンプレートファイルを編集して、カフェ情報と地図を表示する記述を追加します。
functions.php
{API_KEY}の部分には（１）で取得したAPI Keyをいれてください。
これでGoogle Mapsを表示するためのスクリプトを、footerに追加することができます。
（footer.phpにwp_footerのフックが記述されている必要があります）
single.php
Map機能の「緯度」と「経度」は、３〜４行目の部分で取得しています。
['address']で住所のテキスト情報を、['lat']で緯度、['lng']で経度を取得できます。
また、２２行目部分の画像URLを変更するとオリジナルのピン画像に変更できます。
カフェをまとめて１つの地図で表示
記事にしたカフェを、１つの地図上でまとめて表示できるページも作りました。
カフェ巡りしたい時にまとめて見れたら便利なので。
ソース
まずまとめた地図を表示するためのショートコードを作る関数をfunctions.phpに追加します。
functions.php
あとは任意のページで［allMapPin tagname="純喫茶"］と記載するだけで、「純喫茶」タグのついた記事の地図情報（緯度/経度）のピンをつけた、地図が表示されます。
ピンをクリックすると、小さな吹き出しが開き、ピン情報に紐付いた記事が表示される仕組みです。
ちなみにこんな感じです（スクショです）。
４行目のタグ名はショートコードの引数「tagname」を指定しなかった時のデフォルトの値になります。
１５〜２３行目部分で指定されたタグのついた記事情報を取得＆ピンの追加を行っています。
また、２０行目、部分でクリックで開く吹き出し部分の内容を変更できますよ。
余談
もともとは Google Maps Geocoding APIを使ってやろうと思ったのですが、以下の点から断念しました。
- Google Mapを、Geocoding APIで取得した緯度経度を使って表示したらズレてしまう。
- 測地系が色々あり、修正をする必要がある。
- 計算式をいくつか試してみたが、うまくいかなかった（誤差が直らない…）
- 考えていた仕様だと、Mapを表示するために毎回Geocodingで緯度経度を取得し直すことになる（API上限をすぐ超える）
- 記事ごとに緯度経度を保存しておきたいが、手動ではない方法がちょっと思いつかなかった。
- ACFを使えば、悩んでいる上記の問題も簡単に解決できると分かったらやる気が…。
とはいえ、遠回りはしたものの、大変勉強になりました。
WPを使わずにやる必要が出てきたら、もっと掘り深めてみようと思います( ˘ω˘)
参考サイト
Google Maps API | WordPressとプラグインを使ってお店紹介サイトを作る方法
Google Maps APIを使って複数のマーカーと吹き出しを設置してみる ｜ Tips Note by TAM
初めまして。こちらを参考にまとめた地図を作ってみたのですが、tagnameを記述すると地図が表示されなくなってしまいます。3行から5行、13行を削除すると全てのピンが入った地図が表記されるのですが…。
また、タグとカテゴリーを合わせた絞り込みも可能なのでしょうか？ぜひご教授いただければありがたいです。
アキさん
コメントありがとうございます。
tagnameを設定すると表示されないということは、タグ情報の取得がうまくいっていないか、指定のタグの記事に緯度経度の情報がないせいだと思います。
また、カテゴリでの絞り込みなどは、function allMapFunc($atts)の13行目で、記事データを取得する際に絞り込むことでできると思います。
初めまして、とても参考になる情報をありがとうございます。
こちらの記事にて、グーグルマップに店舗位置をプロットすることが出来ました！
質問なのですが、こちらでご教示頂きました内容をもとに個別投稿記事に、
ACFを投稿しようとすると以下の不具合が生じてしまいました。
①貴記事のsingle.phpを参考に個別記事にてACFの店舗情報フィールド内
(貴サイトでいう2行目の店舗情報)に入力し、サイト公開するとフィールド内の本文が表示されず、
再度投稿編集画面に戻るとフィールド内の本文が消えてしまっています。
ACF側の問題でしょうか？
ちなみに、同様のエラーが出ている方の情報を参考に修正を試みましたが、ダメでした。
参考サイト(https://www.postit-web.com/2016/10/12/smart_custom_fields_data/)
②不具合ではありませんが、出来ればこのフォームの最後に関連リンク（お店の外部リンク）
を入れたいと思っています。
お手隙の際に教えて頂ければと思います。
よろしくお願いいたします。