読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Advanced Custom Fields の Google Maps フィールドの使い方

Maps WebDev WordPress

 Advanced Custom Fields (ACF)は様々なフィールドタイプを用意しています。その中に「Google Maps」というものを見つけたので試しました。今回はそのやり方をメモしておきます。
 ACFのフィールドの設定で「Google Maps」を選択すると、ダッシュボードの画面がその場でAjax的に「Google Maps」用の設定に変わります。「zoom」や「center」などの設定がありますが、空欄のままでも別に構わないと思います。
 投稿画面にいってみると、検索が地図の画面があるのがわかります(下写真)。ここで地図に表示したい地点を検索して保存すれば「Google Maps」フィールドの値は確保されます。
f:id:sthmdnss:20140917202013p:plain
試しにどのような値がどのように保持されているのかを見てみます。

<?php 
$latlng = get_field('google_map_test'); 
print_r($latlng);//Array ( [address] => 日本岡山県美作市入田436−3 岡山県美作ラグビー・サッカー場 [lat] => 35.002945 [lng] => 134.13421900000003 )

 連想配列で格納されていることがわかります。あとは、オプションでPHPで出力すれば終わりです。Getting Started - Google Maps JavaScript API v3 — Google Developers の1部分を例にとります。

var mapOptions = {
  center: new google.maps.LatLng(<?php echo $latlng[lat]; ?>,<?php echo $latlng[lng]; ?>),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

 そんじゃーねー

11/6追記

 その後、