Google地图在Wordpress中嵌入了Api：服务器拒绝了您的请求

Question

我在这个问题上已经半夜了。我已经通过iframe将Google地图API嵌入到Wordpress网站中，我收到错误：Google Maps API服务器拒绝了您的请求。提供的API密钥无效。

我的钥匙没问题。我把它放在wordpress之外的一个vanilla html文档中，效果很好。

然后我尝试在header.php中将传感器设置为true。 除了来自我的控制台的更多错误之外没有区别：

无法加载资源： https://www.google.com/maps/embed/v1/place?q=place_id： myplace key = mykey ？wmode = transparent无法加载资源：服务器响应状态为403（） **不能发布其余的因为我需要更多的声誉

我认为问题是将？wmode = transparent附加到密钥的末尾。可能会添加什么以及如何删除它？

Answer 1

问题在于你的主题。

当您在浏览器检查器（元素选项卡）中查看包含地图的页面时，您可以看到链接以？wmode = transparent结束

页面代码不包含？wmode = transparent，您可以在检查器的“源”选项卡上看到它：

这意味着某些js脚本会修改页面代码。在Sources选项卡中浏览脚本，我发现了以下内容：

在第13行，您可以看到问题的根源。这是Youtube视频的一些动作，由开发人员以严重错误完成。他们将“wmode = transparent”添加到任何iframe的src中，包括谷歌地图。

我检查过主题的latest version。同样的错误。

你需要做的事情：只需在文件/wp-content/themes/crescent-theme/js/jquery.custom.js中注释第13行并将其设为：

( function( $ ) {

    function modifyPosts() {
        /* Fit Vids ---------------------*/
        $('.feature-vid, .postarea').fitVids();
    }


    //Fix z-index youtube video embedding
    $(document).ready(function (){
        $('iframe').each(function(){
            var url = $(this).attr("src");
            // $(this).attr("src",url+"?wmode=transparent");
        });
    }); 


    $( document )
    .ready( modifyPosts )
    .on( 'post-load', modifyPosts );

})( jQuery );

如果要更新主题，则必须在同一个js文件中注释类似的行。