Google API Language change

by Zenoo0

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&language=en"></script>
<div id="map"></div>
<input type="text" id="changeLanguage" value="ja">
<button id="languageTrigger">Change language</button>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#changeLanguage {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 10;
  width: 20px;
}

#languageTrigger {
  position: absolute;
  bottom: 20px;
  left: 50px;
  z-index: 10;
  cursor: pointer;
}

JavaScript

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

/*
 * Custom code
 */

let map = new google.maps.Map(document.getElementById('map'), {
  zoom: 8,
  center: new google.maps.LatLng(-34.397, 150.644)
});

document.getElementById('languageTrigger').addEventListener('click', () => {
  let lang = document.getElementById('changeLanguage').value;
  setAPILanguage(lang, ['places'], '').then(() => {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644)
    });
  });
});