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

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

ただいまの
回答率

90.22%

wordpressのカスタムフィールドのプラグイン「Advanced Custom Fields」のgooglemapがページ上で表示されない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,932

ho-ri

score 9

前提・実現したいこと

まだまだ初心者で、様々なサイトを参考にし公開されているソースをコピペさせていただきながらサイトの構築をしております。

wordpressで簡単な不動産情報を掲載するサイトテーマを作成しています。
不動産物件ページの投稿を実現するため
register_post_typeにてカスタム投稿タイプを用意し、カスタムフィールドのプラグイン
Advanced Custom Fields
を今回初めて導入しました。

通常のテキスト入力部分は問題なく表示されるのですが、作成したgoogleマップのフィールドにダッシュボードから住所を入力してもwebページ上で地図が表示されないため、表示できるように修正したいです。

構文自体への理解が浅いため原因が分からず困っており、ご教授頂けると幸いです。

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

googlemapがwebページ上で表示されません。
ダッシュボードにフィールドは作成されており、住所の入力しています。

ご指摘いただきデベロッパーツールで確認したところ以下エラーが出ました。

Google Maps API warning: NoApiKeys 
https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys 
Google Maps API warning: SensorNotRequired 
https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required


と、googlemapAPIのエラーが出ているようでした。

その後ご教授頂いた記事を参考にAPIを再取得しソースコードを追記したのですが、
下記のような内容のエラーが出てしまいました。

js?key=AIzaSyBuGtj2-fUkT7MI6XQpL4zoCSvq8L_AxMI:34 
Google Maps API error: RefererNotAllowedMapError 
https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://dai-ichi.net/property/detail007/

fuctions.phpに実行したカスタム投稿タイプの内容

/add_action('init', 'register_post_type_and_taxonomy');
function register_post_type_and_taxonomy()
{
  register_post_type( // カスタム投稿タイプを定義するための関数
    'propaty'); // カスタム投稿タイプ名
$labels = array(
    'name' => _x('物件情報', 'post type general name'),
    'singular_name' => _x('物件情報一覧', 'post type singular name'),
    'add_new' => _x('新規物件の追加', 'property'),
    'add_new_item' => __('物件情報を記入'),
    'edit_item' => __('物件情報を編集'),
    'new_item' => __('新規物件情報'),
    'view_item' => __('物件情報の確認'),
    'search_items' => __('物件情報を探す'),
    'not_found' =>  __('物件情報はありません'),
    'not_found_in_trash' => __('ゴミ箱に物件情報はありません'),
    'parent_item_colon' =>''
);
$args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => true,
    'menu_position' => 5,
    'supports' => array('title','editor','thumbnail','custom-fields','excerpt','author','revisions','page-attributes'),
    'has_archive' => true
);
  register_post_type('property',$args);

/* カテゴリタクソノミー(カテゴリー分け)を使えるように設定する */
  register_taxonomy(
    'orijinal_themes_cat', /* タクソノミーの名前 */
    'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
    array(
      'hierarchical' => true, /* trueだと親子関係が使用可能。falseで使用不可 */
      'update_count_callback' => '_update_post_term_count',
      'label' => 'オリジナルテーマ作成カテゴリー',
      'singular_label' => 'オリジナルテーマ作成カテゴリー',
      'public' => true,
      'show_ui' => true
    )
  );
/* カスタムタクソノミー、タグを使えるようにする */
  register_taxonomy(
    'orijinal_themes_tag', /* タクソノミーの名前 */
    'orijinal_themes', /* 使用するカスタム投稿タイプ名 */
    array(
      'hierarchical' => false,
      'update_count_callback' => '_update_post_term_count',
      'label' => 'オリジナルテーマ作成タグ',
      'singular_label' => 'オリジナルテーマ作成タグ',
      'public' => true,
      'show_ui' => true
    )
  );
}

fuctions.phpに実行したgooglemapAPIの内容

//カスタムフィールドのgooglemap用
add_filter('acf/fields/google_map/api', function () {
    return array(
        'libraries' => 'places',
        'key'        => 'AIzaSyBuGtj2-fUkT7MI6XQpL********', // Googleで発行したキーを用意する
        'client'     => ''
    );
});

テンプレートファイルsingle-property.phpに実行した内容

<!-- google map -->
<p>
<?php 
$location = get_field('google-map');
if( !empty($location) ):
?>
<div class="acf-map">
    <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
</div>
<?php endif; ?>
</p>
<!-- //google map -->

外部化したjsファイルの読み込み

<!-- ACF googlemap-api -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<?php wp_enqueue_script( 'googlemapapi', get_bloginfo( 'stylesheet_directory'). '/js/googlemapapi.js', array(), false, true ); ?>
<!-- //ACF googlemap-api -->

外部化したjsファイル

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    $el (jQuery element)
*  @return    n/a
*/

function render_map( $el ) {

    // var
    var $markers = $el.find('.marker');

    // vars
    var args = {
        zoom        : 16,
        center        : new google.maps.LatLng(0, 0),
        mapTypeId    : google.maps.MapTypeId.ROADMAP
    };

    // create map                
    var map = new google.maps.Map( $el[0], args);

    // add a markers reference
    map.markers = [];

    // add markers
    $markers.each(function(){

        add_marker( $(this), map );

    });

    // center map
    center_map( map );

}

/*
*  add_marker
*
*  This function will add a marker to the selected Google Map
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    $marker (jQuery element)
*  @param    map (Google Map object)
*  @return    n/a
*/

function add_marker( $marker, map ) {

    // var
    var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

    // create marker
    var marker = new google.maps.Marker({
        position    : latlng,
        map            : map
    });

    // add to array
    map.markers.push( marker );

    // if marker contains HTML, add it to an infoWindow
    if( $marker.html() )
    {
        // create info window
        var infowindow = new google.maps.InfoWindow({
            content        : $marker.html()
        });

        // show info window when marker is clicked
        google.maps.event.addListener(marker, 'click', function() {

            infowindow.open( map, marker );

        });
    }

}

/*
*  center_map
*
*  This function will center the map, showing all markers attached to this map
*
*  @type    function
*  @date    8/11/2013
*  @since    4.3.0
*
*  @param    map (Google Map object)
*  @return    n/a
*/

function center_map( map ) {

    // vars
    var bounds = new google.maps.LatLngBounds();

    // loop through all markers and create bounds
    $.each( map.markers, function( i, marker ){

        var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

        bounds.extend( latlng );

    });

    // only 1 marker?
    if( map.markers.length == 1 )
    {
        // set center of map
        map.setCenter( bounds.getCenter() );
        map.setZoom( 16 );
    }
    else
    {
        // fit to bounds
        map.fitBounds( bounds );
    }

}

/*
*  document ready
*
*  This function will render each map when the document is ready (page has loaded)
*
*  @type    function
*  @date    8/11/2013
*  @since    5.0.0
*
*  @param    n/a
*  @return    n/a
*/

$(document).ready(function(){

    $('.acf-map').each(function(){

        render_map( $(this) );

    });

});

})(jQuery);

状態

ダッシュボード上の表示
ダッシュボード上

webページ上の表示
web上

試したこと

https://www.advancedcustomfields.com/resources/google-map/
上記サイトから基本的なソースコードをコピペしてきています。

理解しきれていない為、根本から間違っている場合などもご指摘いただけたら幸いです。

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

WordPressバージョン 4.4.4
Advanced Custom Fieldsバージョン 4.4.7

不足している情報などがあればご指摘ください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/10 13:24

    ブラウザでエラーは出ていませんか?デベロッパーツールで確認してみてください。http://www.buildinsider.net/web/chromedevtools/01

    キャンセル

  • ho-ri

    2016/08/10 13:47

    クロームのデベロッパーツールで確認しました。
    Google Maps API warning: NoApiKeys
    https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

    Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

    と、googlemapAPIのエラーが出ているようでした。
    こちらはどのような内容でしょうか?

    キャンセル

  • kei344

    2016/08/10 13:48

    ここではなく質問文に追加いただけませんか?よろしくお願いします。

    キャンセル

  • ho-ri

    2016/08/10 13:51

    失礼しました。質問文に追記いたしました。

    キャンセル

回答 1

0

Google Maps API の呼び出しに APIkeyが必須になったからだと思われます。 下記URLのAipaさんの回答からお試しください。

【Google API - WordPressのadvanced custom fields使用時のGoogle Map入力が出来ない(39510)|teratail】
https://teratail.com/questions/39510

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/08/10 18:29

    .acf-map にCSSで幅と高さは指定されていますか?

    キャンセル

  • 2016/08/10 19:47 編集

    cssにて高さと幅は指定しており、上記画像のような形でborder枠だけ表示されている状態です。

    fuctions.phpに実行したgooglemapAPIの内容
    のコードをご教授頂いたページを参考に変更したのですが、こちらの入力ミスでしょうか…。

    現状デベロッパツールでのエラーはありません。

    度々すみませんがお願いします。

    キャンセル

  • 2016/08/11 04:12

    「外部化したjsファイルの読み込み」の「maps.googleapis.com/maps/api」のほうは外されていますか?

    キャンセル

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

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