多次包含 Google 映射 JavaScript API + initMap 不是函数（无效值）

Question

我在我的页面中嵌入了 Google 地图 API (Javascript)。但是，地图只在我刷新页面一次后加载。

当我检查控制台时，Google 地图有两个错误。

❌You have included the Google Maps JavaScript API multiple times on this page. 
js?key=<my_key>&callback=initMap:140 
This may cause unexpected errors.

❌Uncaught (in promise) 
xd {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new xd (https://maps.googleapis.com/<my_key>&callback=initMap:138:113"}
message: "initMap is not a function"
name: "InvalidValueError"
stack: "Error↵    at new xd

1) 我想我没有多次调用 API，但不知何故有一条错误消息。

2) 至于第二个，我确实意识到我使用了一个包含 initMap 函数的脚本 src（来自文档），尽管我还没有定义它。我确实看到了文档中的示例，但我不确定在这种情况下我应该如何使用它。

Show.html.erb

<div id="map"
  style="width: 100%;
  height: 300px;"
  data-markers="<%= @markers.to_json %>"
></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= ENV['GOOGLE_API_BROWSER_KEY'] %>&callback=initMap"
  type="text/javascript"></script>

javascript/packs/map.js

import GMaps from 'gmaps/gmaps.js';

const mapElement = document.getElementById('map');
if (mapElement) {
  const map = new GMaps({ el: '#map', lat: 0, lng: 0 });
  const markers = JSON.parse(mapElement.dataset.markers);
  map.addMarkers(markers);
  if (markers.length === 0) {
    map.setZoom(2);
  } else if (markers.length === 1) {
    map.setCenter(markers[0].lat, markers[0].lng);
    map.setZoom(14);
  } else {
    map.fitLatLngBounds(markers);
  }
}

Application.html.erb

     <%= yield %>
      <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?libraries=places&key=#{ENV['GOOGLE_API_BROWSER_KEY']}" %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
      <%= javascript_pack_tag 'application' %>
      <%= javascript_pack_tag "map" %>

Answer 1

您两次包含 Google 地图 API，一次在 Show.html.erb 中，我相信这将加载到 Application.html.erb 中，然后您再次产生 JavaScript Google 映射 API 第二次。该错误表明它在第 140 行上第二次被包含，那是 Show.html.erb 中带有 initMap 的那个，它可能包含在索引 and/or Application.html.erb 中，所以我建议查看页面源代码以获得最终加载页面的完整 HTML 视图，在第 140 行你可能会看到第二个包含

其次，如果一个函数还没有声明，你不能调用它，所以现在你调用 I initMap 但那个函数不存在。因此，从删除 Show.html.erb 中的脚本 include 或删除 Application.html.erb 中的 yield 开始，同时删除 initMap 调用，直到地图按预期工作，然后继续进行 initMap 声明。

如果出现严重错误，JS 将停止加载或工作，因此同时包含 API 两次并调用不存在的函数会给你带来麻烦。

请确保在使用地图或调用 API 之前加载 API，并且由于 JS 是非阻塞同步，请在执行任何操作之前等待文档的就绪状态。

编辑：您是否还确定在刷新时它没有维护 Google 地图 API 包含？所以你刷新整个页面还是只刷新其中的一部分？

多次包含 Google 映射 JavaScript API + initMap 不是函数（无效值）

Included Google Maps JavaScript API multiple times + initMap is not a function (Invalid Value)

javascript

maps

google-maps

ruby-on-rails

google-maps-api-3