Google Maps API searching for places based on city using dropdown (select option) not working

hello I want to ask about google maps API. Previously, I was a beginner in using Google Maps API. I want to make a search for places by city using select option.

I've tried reading documentation and a few videos on youtube, other posts on stackoverflow, but none of them fit what I want.

I want to make maps like below. when I search by select option, the selected city will appear. And when i click on the marker, i will see place descriptions such as photos, place names, and descriptions.

Is it possible for me to make a feature like that? I really stuck with what I make, I've made some code like the one below. please help me, i really need your help.

let map;
        let places;
        let infoWindow;
        let markers = [];
        let autocomplete;
        const countryRestrict = {
            country: "tangerang"
        };
        const MARKER_PATH = "https://developers.google.com/maps/documentation/javascript/images/marker_green";
        const hostnameRegexp = new RegExp("^https?://.+?/");
        const cities = {
            jakarta: {
                center: {
                    lat: -6.186286,
                    lng: 106.822746
                },
                zoom: 12
            },
            tangerang: {
                center: {
                    lat: -6.336135,
                    lng: 106.676924
                },
                zoom: 11
            }
        };

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                zoom: cities["tangerang"].zoom,
                center: cities["tangerang"].center,
                mapTypeControl: false,
                panControl: false,
                zoomControl: false,
                streetViewControl: false,
                fullscreenControl: false,
            });

            infoWindow = new google.maps.InfoWindow({
                content: document.getElementById("info-content")
            });

            autocomplete = new google.maps.places.Autocomplete(
                document.getElementById("autocomplete"), {
                    types: ["(cities)"],
                    componentRestrictions: countryRestrict
                }
            );

            places = new google.maps.places.PlacesService(map);
            autocomplete.addListener("place_changed", onPlaceChanged);

            document.getElementById("country").addEventListener("change", setAutocompleteCountry);
}

function setAutocompleteCountry() {
            const country = document.getElementById("country").value;

            if (country == "all") {
                autocomplete.setComponentRestrictions({
                    country: []
                });
                map.setCenter({
                    lat: 15,
                    lng: 0
                });
                map.setZoom(2);
            } else {
                autocomplete.setComponentRestrictions({
                    country: country
                });
                map.setCenter(cities[country].center);
                map.setZoom(cities[country].zoom);
            }
        }

#mapsContent {
    position: relative;
}

#mapsContent #controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 5%;
    -webkit-transform: translate(-50%, -5%);
    transform: translate(-50%, -5%);
    background-color: #fff;
    padding: 10px 30px;
    border-radius: 10px;
    z-index: 9;
}

#mapsContent #controls .city {
    padding-right: 30px;
    border-right: 1px solid #acacac;
    margin-right: 20px;
}

#contactContent #mapsContent #controls h4 {
    color: #16215C;
    font-size: 13px;
    margin: 0;
}

#contactContent #mapsContent #controls #country {
    border: none;
    cursor: pointer;
}

#map {
    position: relative;
    width: 100%;
    height: 900px;
    background-color: #CACACA;
    border-radius: 10px;
    z-index: 0;
}

<div class="container-fluid">
  <div class="row" id="mapsContent">
      <div id="controls">
          <div class="city">
               <h4>Kota</h4>
          </div>
          <select id="country">
               <option value="all">All</option>
               <option value="jakarta">DKI Jakarta</option>
               <option value="tangerang" selected>Tangerang</option>
          </select>
      </div>
  <div id="map"></div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" async defer></script>

from Google Maps API searching for places based on city using dropdown (select option) not working