Warning: Google Maps already loaded outside @googlemaps/js-api-loader.

Describe the bug 🐛

I use @googlemaps/js-api-loader explicitly on a page where google-map-react is not used. However, when I navigate between this page and one that does use google-map-react (or vice-versa) I get the following warning:

Google Maps already loaded outside @googlemaps/js-api-loader. This may result in undesirable behavior as options and script parameters may not match.

I noticed that I can easily prevent this warning from showing by conditionally loading Google Maps on the page that explicitly uses @googlemaps/js-api-loader by checking to see if window.google exists or not (see minimal reproducible example below). However, I couldn’t find a way to do something similar with google-map-react?

Any help or suggestions would be greatly appreciated!

To Reproduce 🔍 Minimal reproducible example:

File A.js (conditionally uses @googlemaps/js-api-loader):

import React, { useState, useEffect } from 'react'
import { Loader } from '@googlemaps/js-api-loader'
import Link from 'components/elements/Link'

const A = () => {
    const [isMapApiLoaded, setIsMapApiLoaded] = useState(false)

    useEffect(() => {
        if (isMapApiLoaded || window.google) return
        const loader = new Loader({
            apiKey: process.env.API_KEY,
            libraries: ['places']
        })
        loader.load().then(() => setIsMapApiLoaded(true))
    }, [isMapApiLoaded])
    return (
        <div>
            <h1>A</h1>
            <Link href="/b">b</Link>
        </div>
    )
}

export default A

File B.js (uses google-map-react)

import React from 'react'
import GoogleMapReact from 'google-map-react'
import Link from 'components/elements/Link'

const B = () => {
    const apiHasLoaded = (map, maps) => {
        console.log('Loaded!')
    }

    return (
        <div>
            <GoogleMapReact
                defaultZoom={10}
                bootstrapURLKeys={{
                    key: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
                    libraries: ['places']
                }}
                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={({ map, maps }) => apiHasLoaded(map, maps)}
                options={() => ({
                    fullscreenControl: false
                })}
            ></GoogleMapReact>
            <Link href="/a">a</Link>
        </div>
    )
}

export default B

Environment:

• OS: mac
• Browser: chrome
• Version; @googlemaps/js-api-loader: 1.11.1, google-map-react: 2.1.9

[thallada]

I’m also getting this warning because I’m loading the Google Maps API via a script tag in the header of every page of my application:

<script
    type="text/javascript"
    src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_API_KEY!}&libraries=places`}
/>

I’m doing this because I also need the API for react-google-places-autocomplete. And, this script tag is one method they suggest for loading the API.

My problem is that I also need to use the onGoogleApiLoaded function to center the map once loaded, and it’s not clear if that would work if I loaded the Google Maps API through the script tag instead of this library.

Does anyone actually know what issues this warning is alluding to? If I have two different components that are doing different things and only communicating to each other through state in my app, is there really a risk of things breaking by having both use different instances of the API? Or is it even two instances or one component overriding the version of the API the other component is using? If that’s the case I would just need to make sure both components expect the same version of the Google Maps API and I can safely ignore this warning right? I have yet to notice any issues in my application with this warning but I don’t know if I’m sitting on a ticking time bomb.

Also FYI, there’s already been a lot of discussion about this issue in https://github.com/google-map-react/google-map-react/issues/954. The author says that this issue was fixed in 2.1.9 but it seems like a lot of people are still reporting the warning.

[khevamann]

@itsmichaeldiego I looked into it and it looks like it already works as is. All additional props from bootstrapURLKeys are automatically passed into the loader, and js-api-loader accepts an id like I mentioned above. So the code below works correctly. I put in a PR to update this in the types definition. Is there somewhere I should add this to documentation.

<GoogleMapReact
        bootstrapURLKeys={{ key: API_KEY, libraries: ['places'], id: 'CUSTOM_SCRIPT_ID' }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
      />

Then to use google maps script anywhere else on the page, you can use

const loader = new Loader({
  apiKey: "",
  id: "__googleMapsScriptId",
  version: "weekly",
  libraries: ["places"]
});