通过AJAX加载Google地图API，控制台错误

Question

我正在使用jquery/javascript、ajax和php构建一个完全动态的网站。

当我点击导航链接时，浏览器会使用ajax打开该页面。

因此，所有页面都在同一个index.php中加载。

如果我进入“位置”选项卡，在那里有一个谷歌地图，它将动态加载Google Maps脚本（向body添加一个脚本标签）。

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;callback=initialize"></script>

这个脚本会被前一个脚本自动加载。

<script src="https://maps.gstatic.com/maps-api-v3/api/js/19/1/intl/hr_ALL/main.js"></script>

当我离开“位置”页面时，我会检查脚本是否存在并将其删除。

如果我返回“位置”而不刷新页面，我认为地图会重新开始，但我在控制台中收到以下错误：

“您已在此页面上多次包含Google Maps API。这可能会导致意外错误。”

即使之前已删除脚本，并且地图和内容更改为其他内容，我仍然会收到该错误。

既然我知道只有一个地图实例，那么我应该忽略它吗？

还是它确实对旧地图有某种引用，仅删除两个脚本是不够的。

感谢您提供的任何信息！

- Bralemili

---

为什么不在第一次页面加载时将gmaps库链接一次性完成呢？这比每次需要时重新加载它要好，我想这可以解决你的问题。 - Florian Motteau

你的意思是在index.php中添加gmaps脚本，并在某个页面上使用initialize()函数吗？ 编辑： 这种方法会增加加载时间吗？ - Bralemili

Answer 1

删除脚本元素不会删除这些脚本创建的对象（基本上没有任何影响）。

检查地图 API 是否已加载：

<script>
jQuery(function(){
if(!window.google||!window.google.maps){
  var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3&' +
        'callback=initialize';
    document.body.appendChild(script);
}
else{
  initialize();
}});
</script>

- Dr.Molle

---

这解决了控制台错误问题，并且脚本只加载一次。但是现在当它重新初始化时，地图显示不正确。它显示的宽度不是全宽，而是约200像素。 - Bralemili

当您调用initialize时，地图容器显然没有最终大小...在不知道它何时获得最终大小的情况下，无法提供解决方案（您是否使用某种动画？） - Dr.Molle

我删除了之前的评论，因为我误解了你的评论，当我想写一个新的评论时，在完成之前我按下了回车键...没关系。你最后的解决方案可能会解决这个问题。我会很快回复。谢谢。 - Bralemili

我不会在意这个，通常API会从这个地址加载瓦片。 - Dr.Molle

非常感谢。你帮了很多忙！ - Bralemili