使用@react-google-maps/api调用window.google.maps报错，如何正确调用谷歌地图API？

报错原因 #

• 你在组件render阶段直接调用window.google.maps相关API，但此时LoadScript组件还未完成谷歌地图JS资源的加载，window.google对象尚未初始化，因此读取maps属性时报错。
• 额外注意：google.maps.MarkerImage是谷歌地图JS API v3的废弃接口，当前版本已无需使用该类构造自定义图标。

解决方案 #

你可以根据自己的需求选择任意一种方案实现自定义Marker图标：

方案1：无额外状态的简化写法

如果你的图标仅需要基础的尺寸设置，不需要复杂的偏移、锚点配置，可以直接给icon属性传纯配置对象，无需调用window.google相关API，自然避开加载时机问题：

<Marker
  position={{
    lat,
    lng
  }}
  icon={{
    url: markerStation,
    scaledSize: { width: 48, height: 48 }
  }}
/>

方案2：支持复杂图标的标准写法

如果需要配置锚点、原点等复杂参数，可通过等待地图初始化完成后再渲染Marker的方式，保证window.google已完成初始化：

import React, { Component } from 'react';
import TemplatePage from '../templates/TemplatePage';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
import markerStation from'../../img/marker-station.png';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

const lat = 25.52
const lng = 52.25

export class Home extends Component {
  // 新增状态标记地图是否加载完成
  state = {
    isMapLoaded: false
  }

  render() {
    return (
      <TemplatePage>
        <LoadScript
          googleMapsApiKey="mykey"
        >
          <GoogleMap
            mapContainerStyle={containerStyle}
            center={center}
            zoom={10}
            // 地图初始化完成后更新状态，此时window.google已可正常访问
            onLoad={() => this.setState({isMapLoaded: true})}
          >
            {/* 仅当地图加载完成后渲染带自定义图标的Marker */}
            {this.state.isMapLoaded && <Marker
              position={{
                lat,
                lng
              }}
              icon={{
                url: markerStation,
                scaledSize: new window.google.maps.Size(48, 48),
                origin: new window.google.maps.Point(0, 0),
                anchor: new window.google.maps.Point(24, 48) // 底部中心锚点示例
              }}
            />}
          </GoogleMap>
        </LoadScript>
      </TemplatePage>
    )
  }
}

export default Home;

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