'Loader must not be called again with different options' error when passing new 'language' prop

[NazarDevsMedia]

in my nextjs project I use i18 framework. i want to pass current locale (current active language) to language prop of useJsApiLoader, but if user changes the language exactly this error 'Loader must not be called again with different options' appears. how would you recommend to use different language option without calling the loader again?

os: mac

node --version 19.0.1

react version 18.2.0

nextjs version 13.1.1

next-i18next version 13.0.2

@react-google-maps/api version 2.17.1

[kimitaka]

The easiest way is reloading the entire page.

An official demo by Google does so.

https://developers.google.com/maps/documentation/javascript/localization

[kimitaka]

In addition, this is not an issue of react-google-map-api

[NazarDevsMedia]

in official demo by google I am able to change the language and map does reinitialize behind the scene, but react-google-map-api doesn't, I consider this as an issue imho. At least you should provide it as a caveat in the docu.

[kimitaka]

Which demo does reinitialize scripts without an entire page refresh? Examples in the docs by Google, which I mentioned, are in iframes and refreshing iframe sources.

[NazarDevsMedia]

as I alredy mentioned above its is possible to change language in google demo example, but not with react-google-map-api, so you should implement the same logic the google does at theirs example or make map params dynamic. fyi: after page refresh localization libraries using locale of user's browser, so this workaround will not work.

[kimitaka]

Could you tell me the demo page URL that you mentioned?

after page refresh localization libraries using locale of user's browser, so this workaround will not work.

Avoid results by localization libraries that you are using and initialize with user-specified language.

[NazarDevsMedia]

Demo: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/demos/localization

localization libraries are smart enough to change language without page refresh, so suggested idea will not work.

When you will fix it?

[kimitaka]

Its Language and Region switcher specifies them as GET parameters. Check developer console in your browser it is making a page transition.

[NazarDevsMedia]

ok, i will use another google map library, thank you for your help

[themitvp]

@NazarDevsMedia I solved it by doing this:

import { useTranslation } from "react-i18next";
import { LoadScript } from "@react-google-maps/api";
...
function Map() {
  const { t, i18n } = useTranslation();
  ...
  return (
    <LoadScript
      key={`map-${i18n.language}`}
      googleMapsApiKey={ENV.GOOGLE_KEY}
      libraries={["places"]}
      language={mapLangToGoogleMaps(i18n.language)}
      region={mapLangToGoogleMapsRegion(i18n.language)}
    >

So every time the key on the LoadScript changes, that forces React to re-mount the component, which then allows the settings such as language and region to be changed. So far it is working fine. Hope this helps 😊

[HasanMothaffar]

@NazarDevsMedia I solved it by doing this:

import { useTranslation } from "react-i18next";
import { LoadScript } from "@react-google-maps/api";
...
function Map() {
  const { t, i18n } = useTranslation();
  ...
  return (
    <LoadScript
      key={`map-${i18n.language}`}
      googleMapsApiKey={ENV.GOOGLE_KEY}
      libraries={["places"]}
      language={mapLangToGoogleMaps(i18n.language)}
      region={mapLangToGoogleMapsRegion(i18n.language)}
    >

So every time the key on the LoadScript changes, that forces React to re-mount the component, which then allows the settings such as language and region to be changed. So far it is working fine. Hope this helps 😊

You're a life saver! Thank you. Your solution works fine.

[emirrozerr]

@NazarDevsMedia I solved it by doing this:

import { useTranslation } from "react-i18next";
import { LoadScript } from "@react-google-maps/api";
...
function Map() {
  const { t, i18n } = useTranslation();
  ...
  return (
    <LoadScript
      key={`map-${i18n.language}`}
      googleMapsApiKey={ENV.GOOGLE_KEY}
      libraries={["places"]}
      language={mapLangToGoogleMaps(i18n.language)}
      region={mapLangToGoogleMapsRegion(i18n.language)}
    >

So every time the key on the LoadScript changes, that forces React to re-mount the component, which then allows the settings such as language and region to be changed. So far it is working fine. Hope this helps 😊

But what if we use useJsApiLoader instead? How can I implement your logic to pass currentLocale to language prop of useJsApiLoader?

[themitvp]

@NazarDevsMedia I solved it by doing this:

import { useTranslation } from "react-i18next";
import { LoadScript } from "@react-google-maps/api";
...
function Map() {
  const { t, i18n } = useTranslation();
  ...
  return (
    <LoadScript
      key={`map-${i18n.language}`}
      googleMapsApiKey={ENV.GOOGLE_KEY}
      libraries={["places"]}
      language={mapLangToGoogleMaps(i18n.language)}
      region={mapLangToGoogleMapsRegion(i18n.language)}
    >

So every time the key on the LoadScript changes, that forces React to re-mount the component, which then allows the settings such as language and region to be changed. So far it is working fine. Hope this helps 😊

But what if we use useJsApiLoader instead? How can I implement your logic to pass currentLocale to language prop of useJsApiLoader?

Unfortunately I was not able to get it to work with useJsApiLoader as it would throw the original error of this issue: 'Loader must not be called again with different options'. So that's why I ended up using the <LoadScript.

[NazarDevsMedia]

@NazarDevsMedia I solved it by doing this:

import { useTranslation } from "react-i18next";
import { LoadScript } from "@react-google-maps/api";
...
function Map() {
  const { t, i18n } = useTranslation();
  ...
  return (
    <LoadScript
      key={`map-${i18n.language}`}
      googleMapsApiKey={ENV.GOOGLE_KEY}
      libraries={["places"]}
      language={mapLangToGoogleMaps(i18n.language)}
      region={mapLangToGoogleMapsRegion(i18n.language)}
    >

So every time the key on the LoadScript changes, that forces React to re-mount the component, which then allows the settings such as language and region to be changed. So far it is working fine. Hope this helps 😊

But what if we use useJsApiLoader instead? How can I implement your logic to pass currentLocale to language prop of useJsApiLoader?

yes, you can use useJsApiLoader hook to pass your locale. e.g.: const { isLoaded } = useJsApiLoader({..., language: locale ?? 'de'}) make sure you are not rendering any map components before isLoaded is true to avoid initial problem of this issue 'Loader must not be called again with different options'. hope it helps.