当我单击一个按钮时，如何在对话框中显示google map api v2

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

<button id="showMapButton">显示地图</button>
<div id="mapDialog" title="Google Map"></div>

// 获取按钮和对话框元素
var showMapButton = document.getElementById('showMapButton');
var mapDialog = document.getElementById('mapDialog');

// 按钮单击事件处理程序
showMapButton.addEventListener('click', function() {
  // 创建一个Google Map实例
  var map = new google.maps.Map(mapDialog, {
    center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
    zoom: 12 // 设置地图缩放级别
  });
  
  // 在对话框中显示地图
  mapDialog.style.display = 'block';
});

#mapDialog {
  display: none;
  width: 400px;
  height: 300px;
}