Ionic 6 - localization of Google Maps API

Question

I am using Angular 13 and Ionic 6 to add Google Maps API V3. Here is a simple example provided by Google to add the map using TypeScript.

When using Ionic, I am supposed to add the following in the index.html file:

<script src="https://maps.googleapis.com/maps/api/js?key=ZZZZZ&language=en&region=ca" async defer>
</script>

Then, I will use it in the appropriate components throughout the application. As you can see, the language and region have been hardcoded in the script. I am not sure how would I allow the user to dynamically choose the language and region.

The objective is to have Google's localization example implemented using Ionic. The languages I am interested in adding are English and French.

I tried to add the script in the html file of the component but that didn't work. I even tried to dynamically remove and insert a script but it seemed too complicated. Any help would be appreciated and thank you in advance!

Answer 1

You can use loader to add google maps dynamically, like mentioned here:

https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package

const loader = new Loader({
  apiKey: "YOUR_API_KEY",
  version: "weekly",
  ...additionalOptions,
});

loader.load().then(() => {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
});

and use variable for language and region selection