Google地图加载异步问题

Question

我正在尝试让Google Maps API v3在我的网站上运行，但我遇到了两个问题。

1. 我正在使用yepnope异步加载API脚本，并且在控制台中出现“由X-Frame-Options拒绝加载”错误。它说http://maps.googleapis.com/maps/api/js?sensor=false&callback=init_google_maps&ver=3.0不允许跨源框架。这对我来说很奇怪，因为我没有在任何类型的框架中加载任何东西。请注意，地图仍然会加载，但控制台中的错误让我感到担忧。

2. 地图控件无法正确显示。我不认为这与第一个问题有关，因为即使我以传统方式（同步）加载API，我也会得到这个，但它可能在某种程度上相关。



我不确定它是否重要，但我在我的“localhost”测试服务器上运行它。关于可能导致这些问题的任何想法？

更新 如下所述，X-Frame问题仅在我通过yepnope加载API时发生。我无法理解为什么使用yepnope注入脚本标记会导致错误并使用更简单的js函数。然而，我主要担心的是地图的显示。我在本地服务器上更精简的页面上测试了地图，并且显示正确。所以，我目前的假设是我在页面上的某个地方声明了一个样式（或脚本？），它干扰了Google地图。

更新2： 好的，如果最终整理了显示问题。我浏览了我的主要样式表并注释掉了部分，直到我找到了罪魁祸首。为了使我的图像能够在流畅的布局中响应，我宣布了img { max-width: 100%; }。显然，Google地图不喜欢这样。一旦我覆盖了地图容器的样式，一切都正常显示。然而，X-Frame问题仍然让我感到困惑。

Answer 1

关于第一个问题，如果你想异步加载Maps API，我建议直接使用API documentation中描述的技术（一个简单的动态插入<script>元素）而不是yepnope。它应该可以正常工作。

关于第二个问题，在localhost上运行没问题;这是测试Maps API页面的常用方法。 （我认为您的意思是使用本地网络服务器，并通过localhost://网址而不是file://网址在浏览器中加载您的网页。）

这样的一些症状可能是由于首次创建地图时地图容器元素的大小不正确。特别是，尝试使用height:100%可能会有问题。但是如果没有看到一个正在运行的例子，很难猜到。你能把代码发布到某个网页吗？也许即使在JSFiddle，如果没有别的。