Ionic应用集成Google Maps API后页面空白问题求助

嘿，我之前在Ionic项目里集成Google Maps也碰到过一模一样的情况！你的步骤看起来都没问题，但地图不显示大概率是以下几个常见原因，咱们一个个排查：

1. 地图容器没有设置高度（最常见！） #

你的<div #map id="map">默认高度是0，哪怕地图已经初始化完成，也根本看不到。赶紧给这个容器加个明确的高度样式：

在home.page.scss里添加：

#map {
  width: 100%;
  height: 100%; /* 或者用100vh占满视口，根据你的布局调整 */
}

另外要确保父容器ion-content也有足够的高度，比如可以给ion-content也设置：

ion-content {
  height: 100vh;
}

2. Google Maps脚本加载时机不对 #

有时候ngAfterContentInit执行的时候，Google Maps的脚本还没加载完成，导致google对象未定义，地图初始化失败。

解决方法： #

• 先给脚本标签加上async defer，让它异步加载不阻塞页面：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API_KEY&libraries=places" async defer></script>

• 然后在组件里等待google对象可用后再初始化地图：
  修改你的ngAfterContentInit方法：

ngAfterContentInit(): void {
  // 等待Google Maps脚本加载完成
  const waitForGoogleApi = new Promise((resolve) => {
    const checkGoogle = () => {
      if (typeof google !== 'undefined') {
        resolve(true);
      } else {
        setTimeout(checkGoogle, 100);
      }
    };
    checkGoogle();
  });

  waitForGoogleApi.then(() => {
    this.map = new google.maps.Map(
      this.mapNativeElement.nativeElement,
      { center: { lat: -34.397, lng: 150.644 }, zoom: 8 }
    );
  });
}

3. 检查API Key的权限和配置 #

去Google Cloud控制台确认：

• 你的API Key已经启用了Google Maps JavaScript API
• 没有设置错误的域名限制（如果是Web端项目，要把你的本地开发域名或者生产域名添加到允许列表）
• 查看API的使用日志，有没有权限相关的报错

最后，记得打开浏览器的开发者工具（F12），看看控制台有没有报错信息——比如google is not defined或者地图加载的错误，这些信息能帮你快速定位问题！

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