前端新手求助：如何用Map ID在网页显示自定义虚构游戏地图

• 前端基础薄弱，跟着YouTube教程尝试用Google Maps API在网页显示自定义虚构游戏地图（不是带标记/地标轨迹的普通地图）
• 教程里的script引入代码和当前Google平台要求不符，用了之后无效
• 参考官方文档在initMap函数里设置了mapId，但测试页面还是只显示标准谷歌地图
• 不清楚initMap的作用，急需正确的实现语法
• 测试代码如下：

<script> 
function initMap() { 
  map = new google.maps.Map(document.getElementById("map"), { 
    center: { lat: 69.4865, lng: 88.3972 }, 
    zoom: 13, 
    mapID: '6c69da475e7f7301' 
  }); 
  let marker = new google.maps.Marker({ position: talnakh,map: map}); 
}
</script>

1. 先搞懂initMap的作用 #

initMap是Google Maps JavaScript API的初始化入口函数：当API脚本加载完成后，会自动调用这个全局函数来初始化地图。所以这个函数必须是全局的，不能嵌套在其他函数或块级作用域里。

2. 修正代码里的明显错误 #

• 大小写错误：mapID要改成驼峰式的mapId（Google API参数严格区分大小写）
• 未定义变量：talnakh是自定义变量但代码里没定义，要么改成具体坐标对象{ lat: xxx, lng: xxx }，要么先提前定义这个变量

3. 正确引入Google Maps API脚本 #

必须用当前官方要求的引入格式，包含你的API密钥和callback参数：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap" async defer></script>

• async defer：让脚本异步加载，不阻塞页面渲染，加载完成后自动调用initMap
• 替换你的API密钥为你在Google Cloud控制台生成的有效密钥，且要确保这个密钥启用了Maps JavaScript API

4. 确保自定义Map ID的配置正确 #

• 你的Map ID 6c69da475e7f7301必须在Google Cloud控制台里，关联到你创建的自定义样式地图（不是默认标准地图）
• 检查API密钥是否和这个Map ID所属项目绑定，且没有设置错误的权限或限制

完整可运行示例代码 #

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 给地图容器设置宽高，否则地图无法显示 */
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script>
    // 全局的initMap函数，API加载完成后自动调用
    function initMap() {
      // 定义talnakh坐标（如果需要保留标记的话）
      const talnakh = { lat: 69.4865, lng: 88.3972 };

      // 初始化地图，注意mapId是驼峰式
      const map = new google.maps.Map(document.getElementById("map"), {
        center: talnakh,
        zoom: 13,
        mapId: '6c69da475e7f7301'
      });

      // 添加标记（不需要的话可以删掉这段）
      new google.maps.Marker({
        position: talnakh,
        map: map
      });
    }
  </script>

  <!-- 替换成你的API密钥 -->
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap" async defer></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者eoo