WordPress主题

WordPress主题

关注
发信
关注(28)粉丝(399)

为什么我的WordPress主题中出现Google Map JavaScript错误？

本文介绍了为什么我的WordPress主题中出现Google Map JavaScript错误？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在尝试将Google地图添加到WordPress主题时缺少一些东西。当我使用插件进行WordPress开发时，它会抛出JavaScript错误：

 脚本错误。 
 line 0

我不确定问题落在哪里，我认为我的问题是当我调用Map的API时没有 async defer ：

 < script async defer src =https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap>< / script>

阅读后：



我研究解决了我认为的问题，并且碰到了一个问题：







的代码（））：


$ b $ pre $ function call_the_js_files（）{
if（is_page_template（'page-foo.php'））：
wp_enqueue_script（'google_api'，'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap'，array（'jquery'），''，true）;
add_filter（'script_loader_tag'，function（$ tag，$ handle）{
if（'google_api'！== $ handle）
return $ tag;
return str_replace（' src'，'async defer src'，$ tag）;
}，10，2）;
wp_enqueue_script（'google_map'，get_template_directory（）。'/js/google.js'，array（'jquery'），''，true）;
endif;
add_action（'wp_enqueue_scripts'，'call_the_js_files'）;

google.js 的代码：

 （函数（$）{
 $（函数initMap（）{
 var uluru = {
 lat：11111111， 
 lng：222222222 
}; 
 var map = new google.maps.Map（document.getElementById（'googleMap'），{
 zoom：15，
 center ：uluru 
}）; 
 var iconBase ='https://maps.google.com/mapfiles/kml/shapes/'; 
 var marker = new google.maps.Marker（{ 
 position：uluru，
 map：map，
 icon：iconBase +'parking_lot_maps.png'
}）; 
 google.maps.event.addDomListener（window， （），调整大小，function（）{
 var center = map.getCenter（）; 
 google.maps.event.trigger（map，resize）; 
 map.setCenter（center） ; 
}）; 
}）; 
}）（jQuery）;

当我查看源代码时：

 < script type ='text / javascript'async defer src ='https：//maps.googleapis.com/maps/api/js？key = API_KEY; callback = initMap' >< /脚本> 
< script type ='text / javascript'src ='site / location / for / js / google.js'>< / script>

但我仍然在调试栏中引发错误。有什么我失踪或做错了吗？我没有渲染地图的问题，我遇到的唯一问题是JavaScript错误。在开发中，我在Google上的当前API设置在限制条件下设置为 None 。

当我在 google map script error line 0 我跑过，但我已经运行< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 在我的header.php中。

解决方案

With 我最终瞄准了 wp_footer ，并且包含JavaScript，而不是从外部文件调用它，因为这就是以Google为例。



这是代码，我希望它可以帮助别人： 

  function call_the_js_files（）{
 if（is_page_template（'page-foo.php'））：
？> 
< script type ='text / javascript'> 
函数initMap（）{
 var uluru = {
 lat：11111111，
 lng：222222222 
}; 
 var map = new google.maps.Map（document.getElementById（'googleMap'），{
 zoom：15，
 center：uluru 
}）; 
 var iconBase ='https://maps.google.com/mapfiles/kml/shapes/'; 
 var marker = new google.maps.Marker（{
 position：uluru，$ b $ map：map，
 icon：iconBase +'parking_lot_maps.png'
}） ; 
 google.maps.event.addDomListener（window，resize，function（）{
 var center = map.getCenter（）; 
 google.maps.event.trigger（map， ）; 
 map.setCenter（center）; 
} 
< / script> 
<？php 
 wp_enqueue_script（'google_api'，'https： //数据库（'jquery'），''，true）; 
 add_filter（'script_loader_tag'，function（$ tag） ，$ handle）{
 if（'google_api'！== $ $ handle）
 return $ tag; 
 return str_replace（'src'，'async defer src'，$ tag）; 
}，10，2）; 
 endif; 
 add_action（'wp_footer'，'call_the_js_files'）;


I'm missing something when trying to add a Google Map to a WordPress theme. When I use the plugin Debug Bar for WordPress development it throws a JavaScript error of:

Script error.
line 0

I'm unsure where the issue falls and at the beginning after doing research I thought my issue was when I didn't have async defer when calling the Map's API:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

after reading:

Step 2: Add a map with a marker

I researched to resolve what I thought was the issue and I ran across:

The code for functions.php:

function call_the_js_files() {
    if (is_page_template('page-foo.php')) :
        wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
        add_filter( 'script_loader_tag', function ( $tag, $handle ) {
            if ( 'google_api' !== $handle )
                return $tag;
            return str_replace( ' src', ' async defer src', $tag );
        }, 10, 2 );
        wp_enqueue_script( 'google_map', get_template_directory() . '/js/google.js', array( 'jquery' ), '', true );
    endif;
add_action( 'wp_enqueue_scripts', 'call_the_js_files' );

The code for google.js:

( function( $ ) {
    $(function initMap() {
        var uluru = {
            lat: 11111111,
            lng: 222222222
        };
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 15,
          center: uluru
        });
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: iconBase + 'parking_lot_maps.png'
        });
        google.maps.event.addDomListener(window, "resize", function() {
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center);
        });
    });
} )( jQuery );

When I view the source I get:

<script type='text/javascript' async defer src='https://maps.googleapis.com/maps/api/js?key=API_KEY;callback=initMap'></script>
<script type='text/javascript' src='site/location/for/js/google.js'></script>

but I'm still thrown an error with Debug Bar. Is there something I am missing or doing incorrectly? I have no issues with rendering the map the only issue I'm experiencing is the JavaScript error. While in dev my current API settings on Google are set to None under restrictions.

When I researched further under google map script error line 0 I ran across Google Maps Script error in Onion.js but I am already running <meta http-equiv="X-UA-Compatible" content="IE=edge"> in my header.php.

解决方案

With Stephen's answer I ended up targeting the wp_footer and included the JavaScript instead of calling it from an external file as that is what is in Google's example.

Here is the code, I hope it can help someone else:

function call_the_js_files() {
    if (is_page_template('page-foo.php')) :
    ?>
    <script type='text/javascript'>
    function initMap() {
        var uluru = {
            lat: 11111111,
            lng: 222222222
        };
        var map = new google.maps.Map(document.getElementById('googleMap'), {
          zoom: 15,
          center: uluru
        });
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var marker = new google.maps.Marker({
          position: uluru,
          map: map,
          icon: iconBase + 'parking_lot_maps.png'
        });
        google.maps.event.addDomListener(window, "resize", function() {
           var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center);
        }
    </script>
    <?php
        wp_enqueue_script( 'google_api', 'https://maps.googleapis.com/maps/api/js?key=AP_KEY&callback=initMap', array( 'jquery' ), '', true );
        add_filter( 'script_loader_tag', function ( $tag, $handle ) {
            if ( 'google_api' !== $handle )
                return $tag;
            return str_replace( ' src', ' async defer src', $tag );
        }, 10, 2 );
    endif;
add_action( 'wp_footer', 'call_the_js_files' );

这篇关于为什么我的WordPress主题中出现Google Map JavaScript错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-15 11:29
Powered by LMLPHP ©2024 WordPress主题 0.037549