外部jsonから複数のマーカーをJavascriptでGoogle Mapに追加する

Question

サーバーからjsonデータを受け取り、Googleマップに追加する必要があります。それはうまく動作しますが、マーカーは1つのみ表示され、マーカーを追加するたびに新しい座標に変更され、余分なマーカーが追加されません。マーカーを配列として定義するにはどうすればよいですか？

$.getJSON(url, function(data) { 

var entry = data.feed.entry; 


$(entry).each(function(){ 
    for (var prop in this["gsx$instruments"]) { 
    //alert(this["gsx$instruments"][prop]); 
    listContacts(this["gsx$instruments"][prop]) 
     var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])}; 

     var map = new google.maps.Map(document.getElementById('googleMap'), { 
      zoom: 13, 
      center: myLatLng 
     }); 

     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: this["gsx$instruments"][prop] 
     }); 

    } 
    // Column names are name, age, etc. 
    //$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>'); 
}); 

}); 

Answer 1

新機能addMarkerを追加し、マーカーはまた、同様にAJAX呼び出し外のマップ変数を維持含まれるようにその機能を使用しています。

var map = new google.maps.Map(document.getElementById('googleMap'), { 
      zoom: 13, 
      center: {lat: LAT, lng: LONG} 
     }); 
function addMarker(position, map, title){ 
     var marker = new google.maps.Marker({ 
     position: position, 
     map: map, 
     title: title 
    }); 
} 

$.getJSON(url, function(data) { 

var entry = data.feed.entry; 


$(entry).each(function(){ 
    for (var prop in this["gsx$instruments"]) { 
    //alert(this["gsx$instruments"][prop]); 
    listContacts(this["gsx$instruments"][prop]) 
     var myLatLng = {lat: Number(this["gsx$ycor"][prop]), lng: Number(this["gsx$xcor"][prop])}; 

     addMarker(myLatLng,map,this["gsx$instruments"][prop]); 

    } 
    // Column names are name, age, etc. 
    //$('.results').prepend('<h2>'+this.gsx$instruments.$t+'</h2><p>'+this.gsx$type.$t+'</p>'); 
}); 

}); 

Answer 2

以下の更新されたコードは、基本的には、まずあなたがJSONmarkers提供し、各がnameとcoordinatesが

function formatMarkers(){ 
    // Loop through all of the JSON entries provided in the response 
    for (var i = 0; i < markersArray.length; i++) { 

    var markers = markersArray[i]; 
    // Create popup windows for each record 
    var contentString = '<p><b>Name</b>: ' + markers.name + '</p>'; 

    // Converts each of the JSON records into Google Maps Location format 
    formattedMarkers.push({ 
        latlon: new google.maps.LatLng(markers.coordinates[1], markers.coordinates[0]), 
         message: new google.maps.InfoWindow({ 
          content: contentString, 
          maxWidth: 320 
         }), 
         username: markers.name 
       }); 
    } 
    return formattedMarkers; 
} 

属性持っていると仮定していると仮定array of markers

にmarkersを追加する必要があります次に、それぞれをレンダリングする必要があります

formattedMarkers.forEach(function (n) { 
    var marker = new google.maps.Marker({ 
             position: n.latlon, 
             map: map, 
             icon: icon 
             }); 

    // For each marker created, add a listener that checks for clicks 
    google.maps.event.addListener(marker, 'click', function() { 
      // When clicked, open the selected marker's message 
       n.message.open(map, marker); 
    }); 
    marker.setMap(map); 
} 

私は助けてくれることを願っています。