我可以使用自定义样式加载 @react-google-maps/api 上的消息吗

Question

I'm using @react-google-maps/api for my app and it works well so far, however, while the map is loading there is a very ugly text that says 'Loading...' displayed instead of a map and I was wondering if I can replace it with a proper loader or at least style the text?

Screenshot

Answer 1

Pass a ReactNode into the loadingElement prop.

const Loading = <div /> // change to whatever

<LoadScript
  googleMapsApiKey={googleMapsApiKey}
  ...
  loadingElement={Loading}
>...</LoadScript>

Example