質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.64%

WordPressのadvanced custom fields使用時のGoogle Map入力が出来ない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 8,075

前提・実現したいこと

Advanced Custom Fieldsを使用し、googleマップを表示させたいのですが、
固定ページでgoogleマップの部分が入力出来なくなっています。

原因の特定と、改善をしたいのですが、どこから手をつければいいか分かりません。
同じ現象が起きた方、若しくは解決の手口が分かる方、おられましたらアドバイスをお願いします。

発生している問題・エラーメッセージ

googleマップの入力項目を掲載します。
イメージ説明

**■管理画面のエラー箇所のHTMLソース**
<div id="acf-googlemap" class="field field_type-google_map field_key-field_5301cbd7eb249" data-field_type="google_map" data-field_key="field_5301cbd7eb249" data-field_name="googlemap">
<p class="label">
<label for="acf-field-googlemap">Googlemap</label>
</p>
<div class="acf-google-map " data-zoom="14" data-lng="144.96328" data-lat="-37.81411" data-id="acf-field-googlemap">
<div style="display:none;">
<input class="input-address" type="hidden" value="" name="fields[field_5301cbd7eb249][address]">
<input class="input-lat" type="hidden" value="" name="fields[field_5301cbd7eb249][lat]">
<input class="input-lng" type="hidden" value="" name="fields[field_5301cbd7eb249][lng]">
</div>
<div class="title">
<div class="has-value">
<a class="acf-sprite-remove ir" title="Clear location" href="#">Remove</a>
<h4></h4>
</div>
<div class="no-value">
<a class="acf-sprite-locate ir" title="Find current location" href="#">Locate</a>
<input class="search gm-err-autocomplete" type="text" placeholder="Oops! Something went wrong." autocomplete="off" disabled="" style="background-image: url("https://maps.gstatic.com/mapfiles/api-3/images/icon_error.png");">
</div>
</div>
<div class="canvas" style="height: 400px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
<div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div class="gm-err-container">
<div class="gm-err-container">
</div>
</div>

試したこと

プラグインのアップデート
Advanced Custom Fields 4.4.7を入れても改善しませんでした。
現在は4.4.0に戻しています。

補足情報(言語/FW/ツール等のバージョンなど)

■環境
WordPress 4.5.3
Advanced Custom Fields 4.4.0

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+3

全く同じ事象にハマったことがあり、色々試してみたところ、下記で対応出来ましたので共有ですー。
※すでに解決済みでしたらさーせん。

テーマのなかに置いてある、functions.phpに下記を足したところ、自分の環境では解決することができました。

<?php
...
/**
 * acfでgoogle mapでエラーがでるのでそれを修正
 */
add_filter('acf/fields/google_map/api', function () {
    return array(
        'libraries' => 'places',
        'key'        => 'GOOGLE_API_KEY', // Googleで発行したキーを用意する
        'client'     => ''
    );
});

advance custom fieldのコードを読んでみたところ、input_admin_footer()というメソッドにて、$apiのkeyやらなんやらを差し込むコードがあったので、それにフックしてapi keyを渡すようにすれば解決できました。

<?php
...
       function input_admin_footer() {

           // vars
           $api = array(
            'libraries'        => 'places',
            'key'            => '',
            'client'        => ''
           );


           // filter
           $api = apply_filters('acf/fields/google_map/api', $api);


           // remove empty
           if( empty($api['key']) ) unset($api['key']);
           if( empty($api['client']) ) unset($api['client']);

ちなみに、GOOGLE_API_KEYは、下記サイトを参考にしたら発行できました。

http://nendeb.com/276

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

Google Maps API の呼び出しに APIkeyが必須になったからだと思われます。

【Google Maps field needs setting to add API key - ACF Support】
https://support.advancedcustomfields.com/forums/topic/google-maps-field-needs-setting-to-add-api-key/#post-40161

function nr_load_scripts() {
    wp_register_script( 'googlemaps', 'https://maps.googleapis.com/maps/api/js?key=XXX', null, null, true );  
    wp_enqueue_script( 'googlemaps' );
}
add_action( 'wp_enqueue_scripts', 'nr_load_scripts' );

ACFより前に APIkey付きの Google Maps API用jsを呼び出せば問題を回避できるようです。そのうちプラグイン自体が対応してくれるのではと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/29 20:01

    ご回答いただき有難うござます。
    早速試してみます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる