JSFiddle - React, Tailwind, and code Playground

by SamokhinDmitro_33JS

HTML

<div class="search">
    <div class="form-group">
        <label for="area">Выберите район</label>

        <select id="area" multiple>
            <option value="all">All</option>
            <option value="gips">Гипсолит</option>
            <option value="news">Новая метка</option>

        </select>

        <button id="btn">Отправить</button>
    </div>
</div>

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_iXeN3kLnDFVtsSZ_WDovLQquXGBncMM&callback=initMap" async></script>

<script src="maps.js"></script>

JavaScript

var myMap;


    //API NovaPoshta
    let apiKey = '912d257222b0cb87a01f72c6ccd05cf2';

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

    let data = {
        "modelName": "AddressGeneral",
        "calledMethod": "getWarehouses",
        "methodProperties": {
            "CityName": "Кривий Ріг"
        },
        "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);


            setTimeout(function() {
                initMap(places);
            },5000);

            function initMap(places) {


                var element = document.getElementById('map');

   ...