勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Advanced Custom FieldsでGoogleMapの使用

   

Advanced Custom FieldsでGoogleMapを使用したかった。設定上から選ぶことはできるが、そのままだと記事投稿ページでエラーが発生していた。この辺の対応策と、実際のページ表示方法をメモ。

 

エラーの対処

APIキーを設定していないというのが原因でエラーが発生している模様。テーマファイルのfunctions.phpに以下を追加する。

キーを定数に入れているのは他ページでも使う為。

 

MySQLの保存状態

postmetaテーブルで以下のようシリアライズされた形で保存される。

 

取得と表示方法

 

GoogleMapの表示

iframeで埋め込む方法場合は以下の通り。1件のみ表示させたいような場合はこちらの方法が楽。

 

JavaScriptで出力する場合は以下の通り。複数表示させたい場合はこちらになる。

 

まとめ

GoogleMapのフィールドを使うと経度緯度と住所が入るので使いやすい。また、ダッシュボード上からも使いやすくなる。

 - WordPress

  関連記事

images
WordPressのメール送信フォームに画像認証を設置する

■やりたかった事 ココで作成したメール送信フォームに画像認証を設置する ■方法 ...

images
WordPressでGmailのSMTPサーバを使ってメール送信フォームを作る

■やりたかった事 WordPressでGmailのSMTPサーバを使用したメール ...

images
WordPressで自動でmetaタグのkeywordsとdescriptionを表示

metaタグのkeywordsとdescriptionにて、基本的にはAll i ...

images
さくらvpsにワードプレスを導入

さくらvpsで立ち上げたサーバーにWordPressを導入した際のメモ。 ①ダウ ...

images
WordPressでデータベース接続確立エラー

WordPressで「データベース接続確立エラー」というエラー表示がされた。大抵 ...

images
WordPressで店舗用サイトを作るときに使えそうなテーマ

WordPressで店舗用のサイトを作る際に使えるかも、というテーマがいくつかあ ...

images
WordPressでSNSボタンが表示されない

WordPressでWordPress WP Social Bookmarkin ...

images
WordPressで任意のクエリをページに出力するプラグイン

先日、「WordPressで任意のクエリをページ内で出力する方法 」という記事で ...

images
WordPressサイトのロードアベレージが高い

あるWordPressサイトのロードアベレージが先月ぐらいまでは通常0.5前後で ...

images
WordPressのパーマリンクについて

WordPressのパーマリンクについて、思ったことなんだけど、 ・URLに日本 ...