为什么我的WordPress主题中出现Google Map JavaScript错误？ [英] Why am I getting a Google Map JavaScript error in my WordPress theme?

问题描述

我在尝试将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> 
  

阅读后：

第2步：添加带有标记的地图

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

• 如何在插件中添加defer =defer标签javascripts ？


• https://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts


• 脚本加载器标记

functions.php 的代码（））：

$ 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 我跑过 Onion.js中的Google Maps脚本错误，但我已经运行< meta http-equiv =X-UA-Compatiblecontent =IE = edge> 在我的header.php中。

解决方案

With Stephen's answer 我最终瞄准了 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:

• How to add defer="defer" tag in plugin javascripts?
• https://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts
• Script Loader tag

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错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！