如何仅在用户触发地图显示时加载Google Maps API，避免无效计费

核心实现方案 #

你可以直接用下方的单一行代码完全替换原有加载Google Maps API的script标签，不需要修改其他现有逻辑：

点击触发加载（比如点击「查看地图」按钮时加载） #

<script>document.getElementById('YOUR_TRIGGER_BUTTON_ID').addEventListener('click',()=>{const s=document.createElement('script');s.src='https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap';document.body.appendChild(s)},{once:true})</script>

替换说明：

• 把YOUR_TRIGGER_BUTTON_ID替换为你触发显示地图的按钮/元素的ID
• 把API_KEY_HERE替换为你自己的Google Maps API密钥即可
• 原有initMap地图初始化逻辑完全不用修改，API加载完成后会自动回调执行

滚动到地图区域自动加载 #

如果你的地图默认放在页面下方，希望用户滚动到地图容器位置时自动加载，可以用下方单一行代码替换：

<script>new IntersectionObserver((e)=>{if(e[0].isIntersecting){const s=document.createElement('script');s.src='https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap';document.body.appendChild(s);this.disconnect()}}).observe(document.getElementById('YOUR_MAP_CONTAINER_ID'))</script>

替换说明：

• 把YOUR_MAP_CONTAINER_ID替换为你存放地图的容器元素ID
• 把API_KEY_HERE替换为你自己的Google Maps API密钥即可

方案优势 #

• 完全符合单代码行直接替换的需求，不需要新增额外代码文件或引入第三方库
• 仅在用户实际需要使用地图时才加载API资源，避免不必要的带宽消耗和Google Maps计费
• 自带必填的API Key参数，完全适配当前Google Maps接口要求，不会出现旧方案的参数缺失问题
• 内置单次加载逻辑，不会重复请求API资源

内容的提问来源于stack exchange，提问作者Ben in CA