如何使用单选按钮调用google地图？

<input type="radio" id="map1" name="map" value="map1">
<label for="map1">地图1</label>

<input type="radio" id="map2" name="map" value="map2">
<label for="map2">地图2</label>

<input type="radio" id="map3" name="map" value="map3">
<label for="map3">地图3</label>

document.getElementById("map1").addEventListener("click", showMap1);
document.getElementById("map2").addEventListener("click", showMap2);
document.getElementById("map3").addEventListener("click", showMap3);

function showMap1() {
  // 创建地图容器
  var mapContainer = document.createElement("div");
  mapContainer.id = "mapContainer";

  // 将地图容器添加到页面中
  document.body.appendChild(mapContainer);

  // 使用Google Maps API显示地图
  var map = new google.maps.Map(document.getElementById("mapContainer"), {
    center: { lat: 37.7749, lng: -122.4194 },
    zoom: 12
  });
}

function showMap2() {
  // 创建地图容器
  var mapContainer = document.createElement("div");
  mapContainer.id = "mapContainer";

  // 将地图容器添加到页面中
  document.body.appendChild(mapContainer);

  // 使用Google Maps API显示地图
  var map = new google.maps.Map(document.getElementById("mapContainer"), {
    center: { lat: 40.7128, lng: -74.0060 },
    zoom: 12
  });
}

function showMap3() {
  // 创建地图容器
  var mapContainer = document.createElement("div");
  mapContainer.id = "mapContainer";

  // 将地图容器添加到页面中
  document.body.appendChild(mapContainer);

  // 使用Google Maps API显示地图
  var map = new google.maps.Map(document.getElementById("mapContainer"), {
    center: { lat: 51.5074, lng: -0.1278 },
    zoom: 12
  });
}

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