wordpress

Advanced Custom Fieldsに記入された住所からgoogle mapを表示させるまでのTips

  • このエントリーをはてなブックマークに追加
ACFを自動でGoogleMapに

Advanced Custom Fieldsで住所欄を作り、住所を打ち込む。その住所を自動的にgoogleMapに変換してwebサイトに表示をする。自動化のためのTipsをこちらに記入します

googleMap 表示確認

今回の肝となるGoogleMap表示のためのTipsはこちらを参考にさせて頂いております。

Google Maps APIを使って複数のマーカーと吹き出しを設置してみる | Tips Note by TAM

API

GoogleMapAPIはおそらく必要になるのでこちらで取得をします

JavaScriptをアップロード

JavaScriptとしてscriptで囲んでHTMLに入れるかテキストエディタにコピーして.jsファイルとして読み込みます。

scriptで囲んでHTMLに挿入する場合は下記を囲んで使用

もしくはテキストエディタにコピーしたものを.jsの拡張子で保存、ドメイン直下にjsフォルダを作成して、その中に保存した.jsファイルをアップロードした場合の読み込み文

HTML編集で呼び出しと表示

HTMLに下記を挿入して

GoogleAPIを呼び出し

ここまでの工程で最低限のMAPの表示が成功していると思います。

GoogleMap表示デモ

地図にマーカーを立てる

マップの中心にマーカーを立てるためのJavaScript

GoogleMap表示デモ2

吹き出しの追加

中心に追加されたマーカーをクリックすると、指定していた文章が入ります。

GoogleMap表示デモ3

住所からマップを表示

ジオコーティングが動作するかの確認

こちらのjsファイルで確認するとコンソールに成功したかが出る

GoogleMap表示デモ4

調べた結果から地図を表示

GoogleMap表示デモ5

JavaScriptを埋め込みに変更

phpファイルで呼び出しを行っていたファイルを直接スクリプト文にして埋め込み、記入された住所がphp文で呼び出されて地図を表示するように変更。

今回は8行目と21行目、カスタムフィールドから住所で地図を表示して、ピンをクリックすると店名が表示されるようになっています。

今回はカスタムフィールドで代用して記入した内容

カスタムフィールドへの記入

住所を「sori_address」吹き出しを名称を「sori_name」としてカスタムフィールへ登録して、テンプレート タグ「post_custom()」で呼び出して表示しています。

GoogleMap表示デモ6

Advanced Custom Fieldsでも同様に表示が可能との確認も取れました。これにより顧客ユーザーに住所を登録してもらえばページでの地図表示が自動で可能となるなど、使い勝手のよい機能で学ぶ価値のあるものと感じました。

スポンサーリンク

リンク

スカッとする話やDQN返し、修羅場まとめ話