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

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

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ページ上の表示

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

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

###補足情報(言語/FW/ツール等のバージョンなど)
WordPressバージョン 4.4.4
Advanced Custom Fieldsバージョン 4.4.7

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

kei344

2016/08/10 04:24

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

ho-ri

2016/08/10 04: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 04:48

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

ho-ri

2016/08/10 04:51

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

行動規範の内容に同意します

回答1件

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

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

投稿2016/08/10 04:51

kei344

総合スコア69400

ho-ri

2016/08/10 08:08

回答ありがとうございます。掲載頂いた内容で修正しましたが、追記した内容でエラーが出てしまいました。解決方法をご教授いただければ幸いです。

kei344

2016/08/10 08:14

GoogleのAPIキーはドメインに紐付けるものなので、正しく取得されていない可能性があります。APIキーは取得されましたか？またその際にドメイン設定をする部分がありますが、設定を確認してみてください。【Google Maps の APIキーを簡単に取得する – ねんでぶろぐ】 http://nendeb.com/276

ho-ri

2016/08/10 09:25

ありがとうございます。デベロッパーツールのエラーは解消されたようですが、肝心の地図が表示されませんでした。別部分にも原因があるのでしょうか。

kei344

2016/08/10 09:29

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

ho-ri

2016/08/10 10:47 編集

cssにて高さと幅は指定しており、上記画像のような形でborder枠だけ表示されている状態です。 fuctions.phpに実行したgooglemapAPIの内容のコードをご教授頂いたページを参考に変更したのですが、こちらの入力ミスでしょうか…。現状デベロッパツールでのエラーはありません。度々すみませんがお願いします。

kei344

2016/08/10 19:12

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

行動規範の内容に同意します