如何在HTML select中值更改时显示Google Map

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

<select id="locationSelect" onchange="showMap()">
  <option value="newyork">New York</option>
  <option value="london">London</option>
  <option value="paris">Paris</option>
</select>

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

function showMap() {
  var locationSelect = document.getElementById("locationSelect");
  var selectedValue = locationSelect.value;

  var mapOptions = {
    center: {lat: 0, lng: 0},
    zoom: 2
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  if (selectedValue === "newyork") {
    map.setCenter({lat: 40.7128, lng: -74.0060});
    map.setZoom(12);
    // 添加标记或其他自定义功能
  } else if (selectedValue === "london") {
    map.setCenter({lat: 51.5074, lng: -0.1278});
    map.setZoom(12);
    // 添加标记或其他自定义功能
  } else if (selectedValue === "paris") {
    map.setCenter({lat: 48.8566, lng: 2.3522});
    map.setZoom(12);
    // 添加标记或其他自定义功能
  }
}