Как добавить данные из API OpenWatherMap в WindowInfo в Google Maps?

Question

Я пытаюсь получить информацию о погоде от openweathermap api и отображать его в информационном окне на карте Google для каждой точки клика, я получаю данные из предыдущего маркера, а не из текущего.

var map;
        var markers = [];
        var s = "";
        function initMap() {
            var currentLat;
            var currentLng;
            var coords;
            var contentString;
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 40.295308, lng: 62.164714 },
                zoom: 4
            });
            // get lng and lat
            google.maps.event.addListener(map, 'click', function (event) {
                currentLat = event.latLng.lat();
                currentLng = event.latLng.lng();
                coords = { lat: currentLat, lng: currentLng };
                getWeather(coords);
                addMarker(coords);
                s = "";
            });

            function addMarker(coords) {
                var marker = new google.maps.Marker({
                    position: coords,
                    map: map
                });

                var infoWindow = new google.maps.InfoWindow({
                    content: s
                });
                marker.addListener('click', function () {
                    infoWindow.open(map, marker);
                });
                ///
            }

        }

        function getWeather(coords) {
            fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + coords.lat + '&lon=' + coords.lng + '&units=metric&appid=MYAPI')
                .then((response) => {
                    return response.json();
                })
                .then((myJson) => {

                    console.log(myJson);
                    s += myJson.name;
                }).catch((err) => {
                    console.log("Error: " + err);
                });
        }

Я пытался работать с глобальной строкой, а также несколько раз пытался работать с setTimeOut в функции getWeather, но не могу получить информацию перед отправкой точки на карту

Answer 1

Вы заполняете глобальную переменную s результатом асинхронного вызова, чтобы получить погоду.Вызов, вероятно, не завершен к моменту выполнения addMarker() и создает InfoWindow.

Вы должны вызывать addMarker только после успешного завершения getWeather и избегать использования глобальной переменной s,Удалите текущий вызов addMarker и измените подпись метода на;

function addMarker(coords, s) { ... }

Затем измените функцию getWeather;

function getWeather(coords) {
    fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + coords.lat + '&lon=' + coords.lng + '&units=metric&appid=MYAPI')
        .then((response) => {
                return response.json();
        })
        .then((myJson) => {
                addMarker(coords, myJson.name);
        }).catch((err) => {
                console.log("Error: " + err);
        });
}