Как в googleMaps передать данные из вне?

Question

[dmitriu256]

Как передать данные для создания меток в GoogleMapsApi а именно в initMap() из ajax запроса?

По отдельности эти два куска работают нормально, как их связать?

Если вставить initMap() внутрь ajax запроса то сначала получу ошибку initMap is not a function, тк скрипт карты загружается раньше чем мой скрипт , затем через 5с произойдет отрисовка карты и вставка метки из запроса.

var myMap;

 function initMap() {

     var uluru = {lat: 50.388715, lng: 30.495557};
     var element = document.getElementById('map');

     //select
     var select = document.querySelector('#area');

     //Изначально поле выбора не выбрано
     select.selectedIndex = -1;

     var mapOptions = {
         center: uluru,
         zoom: 16,
         mapTypeControl: false,
         fullscreenControl: false,
         streetViewControl: false
     };

     myMap = new google.maps.Map(element, mapOptions);
    var markers = [];


     console.log(markers.length);
    //Мои адреса (сейчас статика, однако в этом месте хочу получить данные AJAX)
    let places = [
        {
            coordinates: uluru,
            title: 'Гипсолит',
            map: myMap,
            content: 'Привет гипсолит',
            type: 'gips'

        },

        {
            coordinates: {lat: 50.390342, lng: 30.486349},
            title: 'Новое место',
            map: myMap,
            content: 'Привет новая метка',
            type: 'news'
        }
    ];

//Вставляем метки на карту
     showAllMarks();

     function showAllMarks() {
         for(let i = 0; i < places.length; i++) {
             addMarker(places[i]);
         }
     }
     //Фильтр записей
     select.addEventListener('change', function() {
         setMapOnAll();
        console.log(select.value);
         if(select.value === 'all') {
             showAllMarks();
         }
         let arr = [];
         arr = places.filter(f => f.type === select.value);
        //Вставляем метки на карту
         for(let i = 0; i < arr.length; i++) {
             addMarker(arr[i]);
         }
     });


//Удаляем метки с карты
     function setMapOnAll() {
         for(let i = 0; i < markers.length; i++ ) {
             markers[i].setMap(null);
         }
     }


     // Removes the markers from the map, but keeps them in the array.
     function clearMarkers() {
         setMapOnAll(null);
     }

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

         markers.push(marker);

         if(params.icon) {
             marker.setIcon(params.icon);
         }

         //InfoWindow
        var infoWindow = new google.maps.InfoWindow;
         infoWindow.setContent(`<h4>${params.content}</h4>`);

        marker.addListener('click', function() {
            infoWindow.open(myMap, marker);
        });
    }

}

Код AJAX запроса (содержит данные для меток)

let btn = document.querySelector('#btn');

    let data = {
        "modelName": "AddressGeneral",
        "calledMethod": "getWarehouses",
        "methodProperties": {
            "CityName": "city"
        },
        "apiKey": apiKey
    };

    //AJAX запрос
    let test;
    let xhr = new XMLHttpRequest();
    xhr.open('POST', 'https://api.novaposhta.ua/v2.0/json/');

    xhr.setRequestHeader('Content-type', 'application/json; charset = utf-8');

    //Отправка данных на сервер
    xhr.send(JSON.stringify(data));


    //проверяем состояние запроса
    xhr.addEventListener('readystatechange', function () {
        if (xhr.readyState < 4) {
            console.log('Загрузка...');
        } else if (xhr.readyState === 4 && xhr.status === 200) {

            test = JSON.parse(xhr.response);

            let obj =  {
                coordinates: {lat: Number(test.data[0].Latitude), lng: Number(test.data[0].Longitude)},
                title: test.data[0].Description,
                content: {
                    number: test.data[0].Number,
                    district: test.data[0].DistrictCode,
                    title:  test.data[0].Description,
                    address: test.data[0].ShortAddress,
                    phone: test.data[0].Phone,
                    city: test.data[0].CityDescription,
                    area: test.data[0].SettlementAreaDescription,
                    maxWeight: test.data[0].PlaceMaxWeightAllowed,
                    posTerminal: test.data[0].POSTerminal,
                    workHours:  test.data[0].Schedule
                },
                type: 'gips'

            };

            let places = [];
            places.push(obj);
/*************************************************************************/
           //В таком случае получаю ошибку "initMap is not a function" и через 5 с отрисовку карты с маркером
            setTimeout(function() {
                initMap(places);
            },5000);
       
           function initMap(places){...}
        } else {
            console.log('Что то пошло не так');
        }
    });