如何通过javascript代码在搜索框中使用/ call maps来显示城市列表

<input type="text" id="searchBox" placeholder="输入城市名称">
<div id="cityList"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

// 初始化地图
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 2
  });

  // 初始化搜索框
  var searchBox = new google.maps.places.SearchBox(document.getElementById('searchBox'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(document.getElementById('searchBox'));

  // 监听搜索框输入事件
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }

    // 清空城市列表
    document.getElementById('cityList').innerHTML = '';

    // 显示城市列表
    places.forEach(function(place) {
      var city = place.address_components[0].long_name;
      var cityItem = document.createElement('div');
      cityItem.textContent = city;
      document.getElementById('cityList').appendChild(cityItem);
    });
  });
}

window.onload = function() {
  initMap();
};