Добавление маркеров на карту Google, созданную в ответе на запрос Ajax

Question

У меня есть карта Google, в которую я хотел бы добавить маркеры, обозначающие местоположение адресов участников, но у меня есть небольшая проблема, которую я не совсем понимаю.

Если у меня есть следующее:

var map = new google.maps.Map(document.getElementById('map'), {
                              center: {lat: -34.397, lng: 150.644},
                              zoom: 8
                            });

                        var marker = new google.maps.Marker({
                          position: {lat: 39.099, lng: -105.129},
                          map: map,
                          title: ''
                        });

Выше успешно создает карту и успешно добавляет маркер, поэтому я знаю, что я на правильном пути. Но когда я иду, чтобы отредактировать сценарий в следующем:

var map = new google.maps.Map(document.getElementById('map'), {
                              center: {lat: -34.397, lng: 150.644},
                              zoom: 8
                            });

                        $.each(data[1].locations, function(i, item) {
                        var marker = new google.maps.Marker({
                          position: {lat: item.latitude, lng: item.longitude},
                          map: map,
                          title: ''
                        });
                        });

На этот раз карта создается, но маркеры не отображаются (даже несмотря на то, что приведенный выше код корректно реагирует на соответствующие координаты, в консоли отображается следующая ошибка: InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

Answer 1

Убедитесь, что маркеры добавляются только после завершения запроса ajax. Добавьте маркер только в успешной части ajax.

Пример:

$.ajax({
    url:    "ajaxmap.php",
    type : 'GET',
    dataType: 'json',
    success : function(data) {

  $.each(data[1].locations, function(i, item) {
                        var marker = new google.maps.Marker({
                          position: {lat: item.latitude, lng: item.longitude},
                          map: map,
                          title: ''
                        });

}