谷歌地图在 Wordpress 中嵌入 API：服务器拒绝了您的请求

Question

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

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

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

加载资源失败： https://www.google.com/maps/embed/v1/place?q=place_id:myplacekey=mykey?wmode=transparent 加载资源失败：服务器响应状态为 403 () **无法发布其余内容，因为我需要更多声誉

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

Answer 1

问题出在您的主题中。

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

页面的代码不包含?wmode=transparent，你可以在inspector的Sources选项卡上看到它：

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

在第 13 行，您可以看到问题的根源。这是针对 Youtube 视频的一些操作，这是由开发人员犯了一个严重错误而完成的。他们将 ?wmode=transparent 添加到任何 iframe 的 src，包括 Google 地图。

我已经检查了主题的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文件中注释类似的行。