除非用户触发要显示的地图，否则避免加载 Google Maps API [重复]

Question

所以我有一个使用 Google Maps API 来显示地图的网络应用程序，但地图通常隐藏在视图之外，并且不是每次页面加载都需要它。我不想为每个页面加载调用 API（并在后台加载地图），我只想调用 API 并在实际需要时加载地图。

从带宽的角度来看，这似乎是一种不好的做法，并且每次页面加载可能由 Google 收费。

这是我以前的方式（总是加载），一旦页面加载完成就会加载：

// Define initMap code here, and then:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"></script>

有什么好的方法来处理这个问题（最好是可以是单行代码的直接替换方法）？

事后我查看了添加此脚本标记的各种代码，但这似乎是错误的方法。

有一些较旧的帖子（例如load google maps on click），但这些帖子已过时，因为它们不包含现在使用 Google 地图所需的 API 密钥。它们也是多行的，不能直接替代通常使用的单个脚本标签。

另外，对于这样的简单需求，我不喜欢 Google 建议的方法，它需要包含另一个代码库。 (https://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button)

Answer 1

发现使用 jQuery（无论如何我都在使用），$.getScript 选项效果很好：

$("#user_expand_map_section_button").on("click", function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initSpecifyMap');
}); 

只有在用户展开面板/单击按钮/打开模式等时，它才会调用 Google Maps API。