Javascript 如何使用jSON在谷歌地图中创建动态标记？

我正在尝试创建动态标记以从json文件加载信息。由于某些原因，json数据从未加载。当我尝试加载一个标记时，它在没有json数据的情况下运行良好。我看不出是什么错误。在控制台中，它显示“TypeError:（中间值）。error不是一个函数”。下面是代码

html脚本链接

<script src="https://maps.googleapis.com/maps/api/js?CLIENT ID HERE 
  &v=3.21&callback=initMap"
    async defer></script>

json数据

{
"markers": [
    {
        "id": "1",
        "name": "Mesoamerica",
        "lat": "-25.363",
        "lon": "131.044",
        "zoomLevel": "6"
    }
]
}

---

json数据将包含更多的对象，这只是我想要它的一个示例。

您需要等待json数据加载后再对其执行任何操作。我建议将依赖JSON文件的所有内容都放在$.done（）函数中，如下所示：

$.getJSON('data/data.json').done(function(data){
    //everything else
});

---

在等待$.getJSON函数返回数据时，浏览器将继续执行其他代码行。这就是为什么会出现“非函数”错误；您试图对不存在的东西调用函数，而JS不知道如何处理它。如果将所有内容都放在$.done（）中，则在成功检索JSON数据之前，这些行不会执行

在加载映射之前，是什么阻止外部脚本运行？（使用async+defer）我忘了把它取出来。我不需要它来工作。

$.getJSON('data/data.json').done(function(data){
    //everything else
});