###前提・実現したいこと
まだまだ初心者で、様々なサイトを参考にし公開されているソースをコピペさせていただきながらサイトの構築をしております。
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
不足している情報などがあればご指摘ください。