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®ion=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!
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