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

Question

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

Script error.
line 0

我不确定问题出在哪里，一开始在做研究后我认为我的问题是当我在调用地图的 API:[=27= 时没有 async defer ]

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

阅读后：

Step 2: Add a map with a marker

我研究解决了我认为的问题，我运行跨越：

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

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

当我查看源代码时，我得到：

<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>

但是调试栏仍然报错。有没有我遗漏或做错了什么？我在渲染地图方面没有任何问题，我遇到的唯一问题是 JavaScript 错误。在开发中，我在 Google 上的当前 API 设置在限制下设置为 None。

当我在 google map script error line 0 下进一步研究时，我运行跨越 Google Maps Script error in Onion.js 但我已经运行 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 在我的 header.php 中。

Answer 1

好的，我认为问题出在

( function( $ ) {
$(function initMap() {

这是一个错误，因为您不能定义这样的函数。替换为

( function( $ ) {
    function  initMap(){
    .....
    }
} )( jQuery );

Answer 2

更改您的 functions.php 以包含如下内容。 google 映射 api 依赖于您的脚本。

<?php

function theme_js() {

    wp_enqueue_script( 'gmap', '//maps.googleapis.com/maps/api/js?key=YOuR_KEY&callback=initMap', array ('theme_js'), '1.0', true );

    wp_register_script( 'theme_js', get_stylesheet_directory_uri() . '/js/hotelloc.js', array(), '1.0', true );



}

add_action('wp_footer', 'theme_js');


?>

Answer 3

使用我最终以 wp_footer 为目标并包含 JavaScript 而不是从外部文件调用它，因为那是 Google 中的内容例子。

代码如下，希望对大家有帮助：

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 错误？

Why am I getting a Google Map JavaScript error in my WordPress theme?

javascript

wordpress

google-maps

syntax-error

twitter-bootstrap-3