Javascript 谷歌没有定义，除非它是

我使用一个模块来创建一张谷歌地图。 我想动态更改视图的位置，所以我做了如下测试：

document.addEventListener('DOMContentLoaded', function() {


    function moveToLocation(lat, lng){
    console.log(google);
        var center = google.maps.LatLng(lat, lng);
        // using global variable:
        map.panTo(center);
    }
    moveToLocation(48, 12);
});

控制台给我一个错误

谷歌没有定义

，所以我检查了我的控制台，发现

我在这里做错了什么或误解了什么

编辑在此之前加载我的脚本：

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCOuQvJWQQxSde3s5RNCBZmB1VkfFKXxw&amp;callback=AdvancedStoreMapsInitMap&amp;language=fr" async="" defer=""></script>

---

尝试将代码包含在文档加载事件中，而不是DOMContentLoaded

$( document ).ready(function() {
    function moveToLocation(lat, lng){
    console.log(google);
        var center = google.maps.LatLng(lat, lng);
        // using global variable:
        map.panTo(center);
    }
    moveToLocation(48, 12);
});

---

它的基本工作原理以及Google指示您使用其API的方式是使用

async defer

加载脚本，并提供回调函数，如中所述

所有映射代码都应该在该回调函数中，或者从该函数中调用，这样可以确保在尝试访问API之前，API已完全加载

您正在使用的加载项正在加载映射，并提供

AdvancedStoreMapsInitMap

作为回调函数。如果您无法访问该部分代码，那么您就有问题了

您可以在执行代码之前等待一段时间，这将确保已加载API脚本。我说“应该”，因为你不能确定它是否加载，即使你等待2秒或更长时间。。。（网络问题等）

或者你可以直接这样检查：

if (typeof google === 'object' && typeof google.maps === 'object') { ... }

例如，您可以使用超时多次检查。当它是，执行您的代码。有点像黑客，但那应该行得通

---

还请注意，不能在同一页面上多次包含API脚本。它将生成一个错误：您在此页面上多次包含Google Maps JavaScript API。这可能会导致意外错误。

您尝试了哪些步骤来解决此问题？Google脚本是否加载良好？加载DOM并不意味着加载Google API。如何装载，在何处装载？您的代码不完整。@MrUpsidown API是由一个加载项加载的，它被混淆了，所以我不知道他在做什么。它的基本工作原理以及Google如何指示您使用他们的API是使用

async defer

加载脚本，并提供回调函数（文档的第一页）。您的所有映射代码都应该在该回调函数中，或者从该函数中调用，这样可以确保API在您尝试访问它之前已完全加载。@MrUpsidown您实际上应该回答这个问题，因此我进行验证，因为了解google API的这种行为非常重要（对不起，我在文档中没有注意到）那完全一样。DOM可能已经准备好，API还没有完成加载。好的，这很清楚，我将使用onclick事件（因为这是我从一开始就想要的），直到开发人员允许我访问回调：）谢谢欢迎。即使在您的点击事件中，您也应该进行上述检查…是的。我会的。现在它告诉我，

map是未定义的

：D，但多亏了你，我才向前迈进^^^但我在另一个问题中看到，map只能通过api作用域访问，因此我必须在我的函数中再次定义它：（如果变量是在API回调函数中声明的，那么您将无法访问它…如果它是在全局范围中定义的，您应该可以访问它。如果您正在使用的加载项不能满足您的需要，那么您也可以提出自己的加载项。