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

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

新規登録して質問してみよう
ただいま回答率
85.44%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

1回答

5389閲覧

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

ho-ri

総合スコア11

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

プラグイン

プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

Google マップ

Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2016/08/10 03:19

編集2016/08/10 10:42

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/10 04:48

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

2016/08/10 04:51

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

回答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 04:51

kei344

総合スコア69498

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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」のほうは外されていますか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問