“您已在此页面上多次包含 Google Maps API”错误答案

【问题标题】："You have included the Google Maps API multiple times on this page" Error“您已在此页面上多次包含 Google Maps API”错误
【发布时间】：2017-07-07 11:30:20
【问题描述】：

我的 html 页面中有以下内容：

    <script type="text/javascript"
            src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false">
    </script>
    <script 
        async defer
        src="https://maps.googleapis.com/maps/api/js?key=hUnDAdjYG_Wz7u2qL6unHqfBOmvaZ0H1Mg&callback=initMap">
    </script>

第一个链接用于 Google 的 API Geometry Library ，第二个链接初始化并绘制地图。

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

我知道这可以通过仅调用一个脚本并更改参数来解决，请参阅Fixing "You have included the Google Maps API multiple times on this page. This may cause unexpected errors." 虽然我不知道如何复制我的问题的答案。

【问题讨论】：

我在我的 MVC 应用程序中遇到了同样的问题，我正在尝试使用地图打开引导模式。我真的不知道将谷歌地图脚本放在哪里以避免“多次导入”问题。有人吗？
这可能是因为您拥有多个谷歌地图脚本而不是脚本参考的实际定位？看看你是否能够成功地连接它们，就像 @dhaliman 为我所做的那样。

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

您可以包含一个链接：

<script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false&key=AIzaSyBSsKUzYG_Wz7u2qL6unHqfBOmvaZ0H1Mg&callback=initMap">
</script>

基本上合并两个链接中的url参数。

【讨论】：

我需要在一页上显示三个不同的地图并出现错误，如何在一页中导入多个地图
有必要这样做吗？或者这只是推荐？

【解决方案2】：

同样的问题困扰了我很久。我的案例是结合 initMap 加载地图和 Google Places API 来列出输入搜索的自动完成。

这是我的解决方案。

我在 initMap() 中放入的自动完成功能

function activatePlacesSearch() {

var input = document.getElementById('inputValue');
    var autocomplete = new google.maps.places.Autocomplete(input);
}
activatePlacesSearch();

在 index.html 中：

src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places&callback=initMap"></script>

所以最好的解决办法是：

a) 将两个脚本合二为一

b) 如果可能，将 sensro 功能放置在 initMap 中。

【讨论】：