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' );