将带有简码的 Google Maps javascript API 排入 Wordpress

Question

我花了无数个小时试图弄清楚这一点。我不明白我做错了什么。

我的functions.php 中有此代码：

add_shortcode('custom-map-shortcode', 'custom_map_shortcode_callback');

function custom_map_shortcode_callback() {
    return '<div id="map" style="height: 100%; margin: 0;padding: 0;"></div>';
 }

 add_action('wp_enqueue_scripts', 'enqueue_map_script' );
 add_action('wp_head', function(){
     echo '<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&signed_in=true&callback=initMap"></script>';
 });

function enqueue_map_script(){
    global $post;

    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-map-shortcode') ) {
        wp_enqueue_script( 'map-script', get_template_directory_uri() . '/js/map_script.js');
    }
}

当我将[custom-map-shortcode] 放入页面正文时，地图不会加载。 [custom-map-shortcode] 也没有出现，所以我知道有些事情做对了。但是缺少一些东西。现在我知道我的谷歌地图有效，它已经过测试。 javascript代码没有错。源显示在我的页面源中，当我单击它时，它链接到我的map_script.js。 API 密钥也显示在我的页面源中。

您可以通过http://www.tothenationsworldwide.com自行检查

任何帮助将不胜感激！

Answer 1

我感觉这是因为您的<script src=" 行在js? 之后有一个换行符。只有在浏览器中查看源码才能看到：

add_action('wp_head', function(){
     // Here you have an invisible line break. Look at your code,
     // you will see your key=...etc is on a new line. That may invalidate it
     //---------------------------------------------------------v
     echo '<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&signed_in=true&callback=initMap"></script>';
 });

当我查看源代码时，在那之后 html 颜色编码看起来无效，所以我认为这是其中很大一部分。