react-google-maps-api: API key Does NOT work with Safari

using the api like this works perfectly with chrome:

  return (
    <MapPage style={{ height: "100vh", width: "100%" }}>
      <LogoSection logo={logo} />
      <LoadScript googleMapsApiKey="xxx">
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={zoom}
        >

but in safari it does not recognize the api key. Screen Shot 2022-06-02 at 2 37 43 PM

It appears that something is missing/broken with the api key injection for safari. I’m noticing that your examples on the documentation website (https://react-google-maps-api-docs.netlify.app/) are also doing the same thing with safari. So, I don’t think this has anything to do with my implementation.

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

Well, as stupid as it was, the issue was that our google maps api service wasn’t fully configured and purchased. I still don’t know why it was working in some situations, but not others.

That being said, make sure you’ve purchased and configured your google maps api key.

AJTJ on Jun 4, 2023