迁移:google.load 中的 Maps 模块

我们将于 2021 年 10 月 13 日停用为 google.load 提供“Maps”模块的服务。这意味着,在 2021 年 10 月 13 日之后,如果您尝试在 google.load 中使用“Maps”模块,则会收到错误消息(模块“Maps”不受支持),并且系统不会加载任何地图。为避免出现可能的中断,您必须改用某种替代方案。

我需要做什么?

首先,移除用于加载 google.load 加载器的 <script> 标记,然后移除对 google.load 的调用。如果您要使用 Google Loader 执行其他操作,则可以保留加载器 <script> 标记。

接下来,实施一种新方法来加载 Maps JavaScript API(请选择以下选项之一):

使用 Google Loader 的当前示例

以下示例展示了当前使用 Google Loader 加载 Maps JavaScript API 的方式(有两个 <script> 块):

之前

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

使用此方法时,Maps JavaScript API 会在网页加载的同时加载。若要实现以内嵌方式加载,请先将用于加载 www.google.com/jsapi 的 <script> 标记(请参阅“之前”部分)替换为下例中所示的 <script> 标记:

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

然后,在 JavaScript 代码中移除 google.load 函数调用,因为已不再需要它。以下示例展示了一个空 initMap() 函数,该函数在地图库成功加载时调用:

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

请参阅相关文档

从其他 JavaScript 文件动态加载

通过动态加载,您可以控制何时加载 Maps JavaScript API。例如,您可以等到用户点击某个按钮或执行其他操作时再加载 Maps JavaScript API。若要实现动态加载,请先将用于加载 www.google.com/jsapi 的 <script> 标记(请参阅“之前”部分)替换为用于以编程方式添加 <script> 标记的代码,如以下示例所示:

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

然后,将您的回调函数附加到窗口对象,如下所示:

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

最后,将 <script> 标记添加到页面标头中,如下所示:

document.head.appendChild(script);

请参阅相关文档