How can I change the language of Google Maps on the run?

Question

I wan't to reverse geocode and get the address in two languages arabic and english so I want to get it in one language then change the language of the API and get the address in the other language, as I can't find a parameter to send to geocoder to determine the language. Any suggestions?

Greenhaw

Answer 1

A language can be selected when you load the API by appending language=XX to the API URL where XX is the two-character language code (en for English, ar for Arabic, etc.) to the URL in the API call. See http://code.google.com/apis/maps/documentation/javascript/basics.html#Localization for documentation.

This won't let you change it on the fly, and I don't think you can do that. You can try loading the API a second time after getting the initial info you need in one language. But that seems likely to cause problems.

A cleaner way to do it might be to create a separate page that acts as a sort of web service for you. It accepts two parameters: A language code and an address. It loads the API using the language code requested, and reverse geocodes the address, providing the result. Your page would call this web service-like thing twice, once for each language, and then use the results as desired.

Nominal

Oh 'Googloids', can't believe this is still true, they can solve any math problems and do this. Can't find any update on this in 2017 (6 years past this answer). Can't change language dynamically, can't set API key dynamically and so on. @trott do you know how to do this better today? – Commutation

I created a pretty useful function for this question, since I had this problem myself. I added it as an answer. Would you mind adding a little link to it at the bottom of your answer? – Groundsel

Answer 2

I created a function to change the language of Google Maps on the run.
Since it returns a Promise, you can easily wait until the API has loaded to execute some other code.

Demo

---

Example of use

setAPILanguage('fr', ['places'], 'xxxxxx').then(() => {
    //The API is loaded here
});

---

Documentation

/**
 * Changes the language of the Google Maps API
 * @param {String}   lang      - Google Maps new language
 * @param {String[]} libraries - The list of libraries needed
 * @param {String}   key       - Your API key
 * @returns {Promise}          - Resolves when Google Maps API has finished loading
 */

---

Source

const setAPILanguage = (lang, libraries, key) => {
  //Destroy old API
  document.querySelectorAll('script[src^="https://maps.googleapis.com"]').forEach(script => {
    script.remove();
  });
  if(google) delete google.maps;

  //Generate new Google Maps API script
  let newAPI = document.createElement('script');
  newAPI.src = 'https://maps.googleapis.com/maps/api/js?libraries=' + libraries.join(',') + '&key=' + key + '&language=' + lang + '&callback=googleMapsAPILoaded';

  //Callback for the Google Maps API src
  window.googleMapsAPILoaded = () => {
    let event = new CustomEvent('googleMapsAPILoaded');
    window.dispatchEvent(event);
  }

  //Wait for the callback to be executed
  let apiLoaded = new Promise(resolve => {
    window.addEventListener('googleMapsAPILoaded', () => {
      resolve();
    });
  });

  //Start the script
  document.querySelector('head').appendChild(newAPI);

  return apiLoaded;
}

---

Demo

Groundsel

Answer 3

As already pointed out this can't be changed once the map is loaded, but, for those who can afford a page refresh, this could work:

HTML

<script type="text/javascript">
    //load map based on current lang
    var scriptTag = document.createElement('script');

    var currentLang = window.localStorage && window.localStorage.getItem('language');
    var scriptSrc = '//maps.googleapis.com/maps/api/js?libraries=drawing,places&key=YOUR_KEY_HERE';
    if (currentLang)
        scriptSrc = '//maps.googleapis.com/maps/api/js?language=' + currentLang + '&libraries=drawing,places&key=YOUR_KEY_HERE';

    scriptTag.setAttribute('src', scriptSrc);
    scriptTag.setAttribute('async', '');
    document.head.appendChild(scriptTag);
</script>

JS

function changeLangAndReload(lang) {
    window.localStorage.setItem('language', lang);
    window.location.reload();//or use your preferred way to refresh 
}

Cyrillus

Answer 4

The following example displays a map in Japanese and sets the region to Japan:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja&region=JP">
</script>

Source

Cardoso