お世話になります。
現在作成中のサイトなのですが、
Advanced Custom Fieldを使ってGoogle マップを表示させたいと考え作業中です。
管理画面のマップのところで
???の羅列がありAPIキーのエラーというメッセージがでており
表示されておりませんでしたが、ACFの公式サイトを紹介するサイトにて
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件
あなたの回答
tips
プレビュー