Q&A
コードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
お世話になります。
現在作成中のサイトなのですが、
Advanced Custom Fieldを使ってGoogle マップを表示させたいと考え作業中です。
管理画面のマップのところで
？？？の羅列がありAPIキーのエラーというメッセージがでており
表示されておりませんでしたが、ＡＣＦの公式サイトを紹介するサイトにて
function.phpに
function my_acf_google_map_api( $api ){ $api['key'] = 'xxx'; return $api; }
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');
と記載すればよい、とありましたのでxxxの箇所にはキーを入力しアップしましたら
問題なく表示されました。
残るは出力（single.php)です。
該当部分に公式サイトの通り(get_fieldの値はkeisai-mapとしてるのでそのままです）
<?php $location = get_field('keisai-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; ?>
と記載し
CSSも
.acf-map { width: 100%; height: 400px; border: #ccc solid 1px; margin: 20px 0; }
と記載しました。
残りはsingle.phpに
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
と記載し
その下に
<script type="text/javascript" src="./googlemap_area.js"> </script>
と記載して
同じ階層に
googlemap_area.jsというファイル名で
以下の内容を記述してアップしました。
<script type="text/javascript"> (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); </script>
現在は、該当ページでは一瞬待機状態になった上で
地図が表示されずその他の内容のみ表示されます。
設定等間違っているところがありましたでしょうか？
長文になりましたが、どうか
よろしくお願いいたします。
以下エラー文です。
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1 http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4…89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/googlemap_area.js Failed to load resource: the server responded with a status of 404 (Not Found) http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4…3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/%3Ca%20href= Failed to load resource: the server responded with a status of 404 (Not Found) http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/undefined Failed to load resource: the server responded with a status of 404 (Not Found) http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4…3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/%3Ca%20href= Failed to load resource: the server responded with a status of 404 (Not Found)
よろしくお願いします。
それからjsファイルはテーマフォルダの中にあります。
お世話になります。
jsファイルの場所をフルパスにしましたらエラーメッセージが下記のように変わりました。
地図は表示されておりません。
JQMIGRATE: Migrate is installed, version 1.4.1 googlemap_area.js:1 Uncaught SyntaxError: Unexpected token < script.js:2 GET http://127.0.0.1:12053/trigger.js net::ERR_CONNECTION_REFUSEDp @ script.js:2(anonymous function) @ script.js:2target.(anonymous function) @ extensions::SafeBuiltins:19safeCallbackApply @ VM679 extensions::sendRequest:21handleResponse @ VM679 extensions::sendRequest:74 (index):327 GET http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4…3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/%3Ca%20href= 404 (Not Found) %3Ca%20href=:1 GET http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4…3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/%3Ca%20href= 404 (Not Found) /%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/undefined:1 GET http://waribikiken-saikou.com/%e7%94%bb%e5%83%8f%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/undefined 404 (Not Found)
よろしくお願いします。
エラー修正がわかりません。
single.phpで表示されたものをグーグルのツールでみたところ
以下のエラーがでていたので確認したのですが
行目 232:
<a href="tel:123456790"> : タグが閉じていません
行目 256:
<a href="" target="_blank"> : タグが閉じていません
行目 329:
</a> : 開きタグがありません
行目 333:
</a> : 開きタグがありません
行目 337:
</a> : 開きタグがありません
とありました。
<td class="txt"><a href="tel:123456790">123456790<a/></td><a href="" target="_blank"><a/>
5つとも
<a href=""></a>でしっかりとくくられていると思います。
半角とか全角とか、何かほかにエラーの原因があるのでしょうか？
jsファイルを編集してあげなおし、single.phpからスライダー部分を削除してアップしました。
エラーメッセージは以下のように変わりました。
JQMIGRATE: Migrate is installed, version 1.4.1 htmlerrorchecker.js:1 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
ファイルは読まれているように感じますが、まだ地図は表示されません。
他に何かありますでしょうか？
よろしくお願いいたします。
文字数オーバーになりました。
回答1件
0
ベストアンサー
エラーの内容にもよりますが、キーが入っていない、とかは無いですか？
HTML
1<script src="https://maps.googleapis.com/maps/api/js?key=ここにきーをいれる"></script>
エラー文は解決のための情報がたくさん含まれているため、質問時にはなるべく書かれた方が良いと思います。
投稿2016/10/21 17:13
総合スコア69400
ありがとうございます。
確認しましたら、
取得したキーを入力しております。
現時点でエラー文というのは表示されるのでしょうか？
表示されてないので何らかのエラーでしょうから、エラーはでてもいいものですけど
何も表示されておりません。
JavaScriptのエラーは、画面には表示されません。
「コンソール」に表示されます。
デベロッパーツールのコンソールにも何も出ませんか？
【Chrome デベロッパーツールの使い方概要 | Web Tips】
http://weback.net/utility/1410/
.acf-map が出力されているか確認し、あと、「./googlemap_area.js」とされていますが、テーマフォルダに置いていたりはしませんよね？どちらにせよフルパスに切り替えてください。
ありがとうございます。
エラー文コンソールにありました。
本文にコードブロックで記載いたします。
ありがとうございます。
ひとまずフルパスに変更いたします。
> googlemap_area.js Failed to load resource
読み込めてないですね。
ほかにも変なファイルを読もうとしているので、多分コードがどこかで崩れている（閉じタグ忘れや""の閉じ忘れ）可能性があります。出力されたHTML（ブラウザで「ページのソースを表示」）を見て確認／修正してみてください。
ありがとうございます。
確認して修正してみます。
<a/> は閉じタグではありません。
<script type="text/javascript"> をjsファイルの中に書いてあるのでしょうか。
お世話になります。
はい、元ソースがそう書いてましたので
<script type="text/javascript"> はjsファイルの中に書いています。
そのままコピーして使っています。
お世話になります。エラーチェックツールを使いましたら
<script type="text/javascript">
と
</script>
にエラーらしきものがありましたので削除してアップしました。
また、single.phpのスライダー部分はひとまず削除してアップしましたら
別のエラーメッセージがでました
質問本文に記載いたします。
> エラー
多分別問題。赤くエラーになっていますか？たぶん赤背景ではないと思いますが。
【非同期じゃないXMLHttpRequestをメインスレッドで使うのはもうオワコンらしい - Qiita】
http://qiita.com/kozy4324/items/a0179cfd761f7bfb03ff
.acf-map が出力されているか確認しましたか？そのなかに適切にマーカー用要素が入っていますか？
お世話になります。
http://jshint.com/
でさきほどの2箇所を削除して
チェック確認しましたら
CONFIGURE
Metrics
There are 9 functions in this file.
Function with the largest signature take 2 arguments, while the median is 1.
Largest function has 6 statements in it, while the median is 2.
The most complex function has a cyclomatic complexity value of 2 while the median is 1.
Two undefined variables
25 google
26 google
30 google
64 google
67 google
79 google
84 google
109 google
114 google
158 jQuery
本文は質問文に記載します。
と表示されました。
.acf-map
の出力は調べて確認してみます。
お世話になります。
.acf-mapは表示されてませんでした。
> js
無視で。自分の書いたコード以外をチェックツールに通してもたいして意味は無いです。そんなことよりもエラーが出ている（赤背景）か出ていないかを書いてください。
> .acf-map
無いなら当然表示されない。最初のほうに書いたのになぁ。
お世話になります。
赤背景で以下のエラーがでていました。
2 個のタグが対応していません
行目 223:
<a href="tel:120"> : タグが閉じていません
行目 247:
<a href="http://20s-femininity.net" target="_blank"> : タグが閉じていません
となります。
また、コンソールでは
JQMIGRATE: Migrate is installed, version 1.4.1
htmlerrorchecker.js:1 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
と表示されております。
> コンソールでは
さっき質問文にあった。エラーとは関係が無い。
エラーを直すのは必要ですが、そもそも表示されていない地図情報は表示されません。
お世話になります。
以下のコードを
single.phpに記載しましたら表示されました。
http://on-ze.com/archives/4961
よりの引用でしたが、
$googlemap = get_field('googlemap'); ?>
の部分を
$google_map = get_field('google_map'); ?>
に変更しまして
そのままだと
<script src="//maps.google.com/maps/api/js"></script>
が重複記載、というエラーがでまして
削除しましたら無事表示されました。
ありがとうございました。
```ここに言語を入力
<!別の地図出力-->
<?php
if( get_field('google_map') ) {
$google_map = get_field('google_map'); ?>
<div id="googlemaps" style="width:600px; height:400px;"></div>
<script type="text/javascript">
google.maps.event.addDomListener(window,"load",function(){
var mapdiv=document.getElementById("googlemaps");
var myOptions = {
zoom:17,
center:new google.maps.LatLng("<?php echo $google_map['lat']; ?>","<?php echo $google_map['lng']; ?>"),
mapTypeId:google.maps.MapTypeId.ROADMAP,
scaleControl:true
};
var map=new google.maps.Map(mapdiv,myOptions);
var marker=[];
var infowindow=[];
marker[0]=new google.maps.Marker({
position:new google.maps.LatLng("<?php echo $google_map['lat']; ?>","<?php echo $google_map['lng']; ?>"),
map:map,
title:"<?php echo $google_map['address']; ?>"
});
});
</script>
<?php } ?>
<!別の地図出力ここまで-->
```
あなたの回答
tips
プレビュー
