google-maps-react-hooks icon indicating copy to clipboard operation
google-maps-react-hooks copied to clipboard

GoogleMapsProvider parameter mismatch error when loading multiple maps

Open julio-villa opened this issue 3 months ago • 0 comments

According to the docs and the multiple-google-maps example, it looks like it should be possible to load several maps by using several GoogleMapsProvider components, so long as they all receive the same props. However, when I do that, I see the following error:

The Google Maps API Parameters passed to the `GoogleMapsProvider` components do not match. The Google Maps API can only be loaded once. Please make sure to pass the same API parameters to all of your `GoogleMapsProvider` components. 

Expected parameters: 
Object { key: "<api key>", language: "en", region: "US", callback: "mapsCallback" }
 

Received parameters: 
Object { key: "<api key>", language: "en", region: "US" }

It looks like what's happening is that the first provider sets callback=mapsCallback when creating the script, but for subsequent providers (which detect an existing script), the callback param is never added to params, so the comparison with the loaded script always fails.

Also, the error can be seen when running the multiple google maps example as well.

julio-villa avatar Sep 02 '25 20:09 julio-villa