Добавление нескольких маркеров из внешнего json в Карту Google в Javascript

Question

Я получаю данные json с сервера и их нужно добавить на карту google. Он работает отлично, однако, я вижу только один маркер, и я предполагаю, что каждый раз, когда я добавляю маркер, он меняет его на новые координаты и не добавляет дополнительный маркер. Как определить маркеры в виде массива?

$.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 и использовать эту функцию, чтобы включить маркеры также сохранить переменную карту вне АЯКС вызова, а также. обновленный код ниже

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

По сути, сначала нужно добавить markers к array of markers

Предположим, у вас есть JSON, обеспечивающие markers и допускающую каждый имеет 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; 
} 

Затем вам необходимо отобразить каждый из них

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); 
} 

Надеюсь, я был полезным.