Geek Answers Handbook

How can I change the language of Google Maps while I work?

I don’t want to change the geocode and get the address in two languages, Arabic and English, so I want to get it in one language, and then change the API language and get the address in another language, because I can not find the parameter to send to the geocoder to determine the language. Any suggestions?

+8
source share
4 answers

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

This will not allow you to change it on the fly, and I do not think you can do it. You can try loading the API a second time after getting the initial information you need in one language. But this is likely to cause problems.

An easier way to do this could be to create a separate page that will serve as a web service for you. It takes two parameters: language code and address. It loads the API using the requested language code and reverses the address geocode, providing the result. Your page will link to this web service thing twice, once for each language, and then use the results as you wish.

+17
source

I created a function to change the language of Google maps on the go.
Since it returns Promise , you can easily wait for the API to load in order to execute some other code.

demonstration

Usage example

 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 */

A 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; }

demonstration

+2
source

As already mentioned, this cannot be changed after loading the map, but for those who can afford to refresh the page, this might 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 }
+1
source

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>

A source

0
source

More articles:


All Articles