将带有短代码的Google Maps javascript API排入Wordpress队列

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

我在

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

add_shortcode（'custom-map-shortcode'，'custom_-map_shortcode_callback'）；
函数自定义\映射\短代码\回调（）{
返回“”；
}
添加_操作（“wp_排队_脚本”、“排队_映射_脚本”）；
添加操作（'wp_头'，函数（）{
回声'；
});
函数排队映射脚本（）{
全球$员额；
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\u script.js

。API密钥也显示在我的页面源代码中

你可以在

---

任何帮助都将不胜感激

我有一种感觉，这是因为您的

源代码表明您正在以某种方式将一个ne HTML页面加载到现有的文档流中-对于iframe来说很好，在div中则不太好。加载的HTML甚至都不是有效的HTML…只是碰巧在
之前，我有点困惑。我删除了div id=map，因为据我所知，在使用短代码时不需要它。你对html页面的看法我不太明白。我在wordpress中使用大学主题，在我的页面中，我也在用[自定义地图快捷码]编写脚本，等等。。。这是正确的做法吗？或者你是说我问题中的代码不正确？或者可能是我的javascript代码？我的javascript代码中没有html。我修复了代码，使其不包含页面上的html标记。这个问题现在已经解决了，但我的问题还没有解决。[自定义地图快捷码]未出现在我的页面上，因此我认为我的快捷码是正确的。有一点我想说的是，由于包含了太多全尺寸的高分辨率照片，页面加载速度非常慢（至少对我来说是垃圾宽带连接）。您应该生成图像的缩略图，并链接到完整大小的图像。无论如何，仅仅是一个观察-不能提供对Wordpress问题的见解-永远不要使用它。谢谢你的输入！非常感谢！我找不到摆脱断线的办法。我把它扔掉了，但记不清是怎么扔掉的。如果我重新键入，它仍然会在该点中断。有什么建议吗？此外，任何我没有[cutsom map shortcode]的页面，页面都会加载错误代码：InvalidKeyOrUnauthorizedURLMapError。我已经通过谷歌api密钥，并注册和验证了我的网站。不可能吧。这是一个奇怪的现象，这是肯定的！！我想不出它为什么会这样分裂，虽然我对Wordpress的了解不多。
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>';
 });