Javascript API Карт Google - Создание маркеров из списка выбора

Question

У меня есть опция выбора следующим образом ...

<select multiple id="waypoints" th:field="${deliveries}">
        <option th:each="delivery: ${deliveries}" th:value="${delivery.addresses.street1}" th:text="${delivery.addresses.street1}"></option>
    </select>

, и я создаю маркеры, подобные этому

var locations = document.getElementById('waypoints');
        var x;


        for (x = 0; x < locations.length; x++) {
            var location = locations.options[x].text
            window.alert(location)
            //LOCATION IS CORRECT
            $.getJSON(
                    'http://maps.googleapis.com/maps/api/geocode/json?address='
                            + location + '&sensor=false', null, function(
                            data) {

                        var p = data.results[0].geometry.location;
                        var latlng = new google.maps.LatLng(p.lat, p.lng);

                        var contentString = location
                        //LOCATION IS ALWAYS THE LAST ONE IN LIST?
                        var infowindow = new google.maps.InfoWindow({
                            content : contentString
                        });

                        var marker = new google.maps.Marker({
                            position : latlng,
                            animation : google.maps.Animation.DROP,
                            map : map,
                        });
                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                        gmarkers.push(marker);
                    });
        }

Маркеры созданы правильно, однако они все одинаковыеконтент, который является последним элементом списка.Я прокомментировал код для большего понимания.Есть идеи?

Answer 1

Мне удалось исправить проблему с помощью

$("#waypoints > option").each(function() {

});

вместо использования цикла for.

FULL CODE

 $("#waypoints > option").each(function() {
            var location = this.text
            $.getJSON(
                    'http://maps.googleapis.com/maps/api/geocode/json?address='
                            + location + '&sensor=false', null, function(
                            data) {

                        var p = data.results[0].geometry.location;
                        var latlng = new google.maps.LatLng(p.lat, p.lng);

                        var contentString = location
                        var infowindow = new google.maps.InfoWindow({
                            content : contentString
                        });

                        var marker = new google.maps.Marker({
                            position : latlng,
                            animation : google.maps.Animation.DROP,
                            map : map,
                        });
                        marker.addListener('click', function() {
                            infowindow.open(map, marker);
                        });
                        gmarkers.push(marker);
                    });

Answer 2

Это потому, что ваша переменная имеет неправильную область. Когда ваш обратный вызов будет вызван, ваш цикл завершится, и location станет последним в списке.

Один из способов сделать это - заменить for -loop на Array.forEach.