配置@react-google-maps/api的zoomControlOptions时报google未定义错误如何解决

报错的根本原因是Google Maps JS API属于异步加载资源，在你声明options配置对象时，谷歌地图的JS脚本还没有完成加载，window.google全局对象还未挂载，因此直接访问google会触发未定义错误。

方案1：等待API加载完成后再生成配置 #

@react-google-maps/api提供了useJsApiLoader钩子用来监听API加载状态，你可以等加载完成后再生成配置对象：

// 导入依赖
import { useJsApiLoader, GoogleMap } from '@react-google-maps/api';

const MapComponent = () => {
  // 初始化加载器，替换为你自己的API密钥
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "YOUR_GOOGLE_MAPS_API_KEY"
  })

  // 仅当API加载完成后才生成完整配置
  const mapOptions = isLoaded ? {
    zoomControl: true,
    mapTypeControl: false,
    minZoom: 2,
    streetViewControl: false,
    zoomControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
    },
  } : {}

  if (!isLoaded) return <div>地图加载中...</div>

  return <GoogleMap
    options={mapOptions}
    // 补充其他地图属性：zoom、center等
  />
}

方案2：通过地图实例的onLoad回调配置 #

你也可以把控制项配置放到地图的onLoad回调中处理，回调触发时API必然已经加载完成，无需额外判断加载状态：

const MapComponent = () => {
  const handleMapLoad = (map) => {
    map.setOptions({
      zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
      }
    })
  }

  return <GoogleMap
    onLoad={handleMapLoad}
    options={{
      zoomControl: true,
      mapTypeControl: false,
      minZoom: 2,
      streetViewControl: false,
    }}
    // 补充其他地图属性
  />
}

• 不要在组件外部的全局作用域声明包含google对象引用的配置，所有需要用到google全局对象的逻辑都要确保在API加载完成后执行。
• 临时快速修复可以直接写入枚举对应的原始值position: 1（TOP_LEFT对应的枚举值为1），但该方式不推荐长期使用，存在谷歌官方修改枚举值后逻辑失效的风险。

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