【グーグルマップ】アドバンスカスタムフィールド（ACF）で座標ピンの表示

SUGOYOKU BLOG

今回はグーグルマップで地図に載っていない箇所にピンを置いてマップを表示するやり方です。座標で表示をさせるやり方です。前提条件として・アドバンスカスタムフィールドをインストールし有効は割愛・APIの取得、設定も割愛アドバンスカスタムフィールドで下記を設定します。ラベルやフィールド名はお好きな名称に変更ください。アドバンスカスタムフィールド　設定続いてはfunctions.phpにAPIを設定。

/*
* acfでgoogle mapでエラーがでるのでそれを修正
*/
add_filter('acf/fields/google_map/api', function () {
    return array(
      'libraries' =&gt; 'places',
      'key' =&gt; 'APIキー', // Googleで発行したキーを用意する
      'client' =&gt; ''
    );
  });
  
  // google map api
  add_action('wp_enqueue_scripts', function(){
    $api_key = 'APIキー';
    wp_enqueue_script('google map', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key);
  });

* acfでgoogle mapでエラーがでるのでそれを修正

add_filter('acf/fields/google_map/api', function () {

return array(

'libraries' => 'places',

'key' => 'APIキー', // Googleで発行したキーを用意する

'client' => ''

);

});

// google map api

add_action('wp_enqueue_scripts', function(){

$api_key = 'APIキー';

wp_enqueue_script('google map', 'https://maps.googleapis.com/maps/api/js?key=' . $api_key);

});

表示をさせたい箇所に

<div class="acf_map container">
 <iframe width="100%" height="400" style="border: 0;" src="https://maps.google.co.jp/maps?&amp;q=&lt;?php echo get_post_meta($post-&gt;ID , 'coordinate' ,true); ?&gt;&amp;output=embed" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>