Googlemapb api 複数のマーカー表示に
基礎的なことかもしれませんが、結構調べたりしても分からなかったので、教えてほしいです。
Googlemap api を使った複数のマーカー表示を$getJSON（jQuery)を使用しようして表示させたいのですが、表示できません。
どこがおかしいか教えてください。
【HTML】
1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta charset="UTF-8">
5.<title>map</title>
6.<style type="text/css">
7.html,body,#map {
8.height: 100%;
9.}
10.</style>
11.</head>
12.<body>
13.<div id="map"></div>
14.<script type="text/javascript" src="map.js"></script>
15.<script type="text/javascript" src="jquery-3.6.0.min.js"></script>
16.<script async defer
17.src="https://maps.googleapis.com/maps/api/js?key=【APIキー】&callback=initMap">
18.</script>
19.</body>
20.</html>
【JavaScript】
1.var map;
2.var marker = [];
3.var data = [];
4.var center = {lat: 36.72073,lng: 137.27112};
5.function initMap() {//地図の作成
6.map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む
7. center: center,// 地図の中心を指定
8. zoom: 15 // 地図のズームを指定
9. });
10. $.getJSON("aaaaa.json", function(json){
11. for (var i = 0; i <= json.length-1; i++) {
12. data.push(
13. {
14. 'name': json[i].name,
15. 'lat': json[i].lat,
16. 'lng': json[i].lng
17 });
18 };
19. for (var i = 0; i < data.length; i++) {
20. markerLatLng = {lat: data[i]['lat'], lng: data[i]['lng']};
21. marker[i] = new google.maps.Marker({ //マーカーの追加
22. position: markerLatLng,//マーカーを立てる位置を指定
23. map: map//マーカーをたてる地図を指定
24. });
25. }
26 });//jsonの閉じ
27.}
【JSON】
[
{
"name": "名古屋駅",
"lat": 35.170897,
"lng": 136.881558
}, {
"name": "大名古屋ビルヂング",
"lat": 35.172311,
"lng": 136.884568
}, {
"name": "国際センター駅",
"lat": 35.172038,
"lng": 136.887701
}
]
