Google Maps JS API + JSON - 複数のマーカーが表示されない

Question

私は非常に簡単ですが、地図にマーカーを置く必要があるため、PHPを使用して作成したJSONからデータを取得します。 Google Mapsのマーカが表示されないことについては、他のすべての質問（実際）を調べましたが、どれも私のために働いていませんでした。私は自分のコードの欠陥を見つけることができません。

JSONは、 'ID' は重要ではありません（ただし、58の項目の長さ）、このようなものです：

[ 
    { 
    "id": "2", 
    "lat": "-49.217290", 
    "lon": "-16.416160", 
    "tit": "Heinz", 
    "desc": "18 Machines" 
    }, 
    { 
    "id": "3", 
    "lat": "-49.235455", 
    "lon": "-16.676926", 
    "tit": "Warehouse", 
    "desc": "10 Machines" 
    } 
] 

私は私が何か間違ったことをすれば申し訳ありませんが、ここに新たなんです。私のコードは怒鳴るです：

<div id="map" class="height-400"></div> 
    <script> 
     var map; 
     var myLatLon = {lat: -16.398293, lng: -48.965098}; 
     var markers = []; 

     $.ajax({ 
      dataType:'json', 
      url: "contents/map_data.php", 
      success: function(data){ 
       markers = data; 
      } 
     }); 
     function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
      center: myLatLon, 
      zoom: 4, 
      //disableDefaultUI: true, 
     }); 

     var i= 0; 
     $.each(markers, function(i, item) { 
       if(typeof item == 'object') { 
        var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lon)), 
       map: map, 
        title: item.titulo, 
        label: item.desc 
       }); 
       marker.setMap(map); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(item.desc); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 
        i=i+1; 
       } 
     }); 
     }      
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initMap" async defer></script> 

Answer 1

マーカー変数は、AJAXリクエストがまだ戻っていない原因は、空の配列です。成功コールバック内でコードを移動するか、成功コールバックから呼び出す必要があります。

のようなものを試してみてください：acctually今私はちょうど情報ウィンドウと格闘しています、働いていたが、それは多分、別の質問である

<div id="map" class="height-400"></div> 
    <script> 
     var map; 
     var myLatLon = {lat: -16.398293, lng: -48.965098}; 
     var markers = []; 

     $.ajax({ 
      dataType:'json', 
      url: "contents/map_data.php", 
      success: function(data){ 
       markers = data; 
       initMap(); 
      } 
     }); 
     function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
      center: myLatLon, 
      zoom: 4, 
      //disableDefaultUI: true, 
     }); 

     var i= 0; 
     $.each(markers, function(i, item) { 
       if(typeof item == 'object') { 
        var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(parseFloat(item.lat),parseFloat(item.lon)), 
       map: map, 
        title: item.titulo, 
        label: item.desc 
       }); 
       marker.setMap(map); 

       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
       return function() { 
        infowindow.setContent(item.desc); 
        infowindow.open(map, marker); 
       } 
       })(marker, i)); 
        i=i+1; 
       } 
     }); 
     }      
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=MY_SECRET_KEY&callback=initMap" async defer></script>