Google Maps compatibility IE11 not working because of polyfills.js

Question

My app website is not working fine on IE11.

The website is not loading, it gives me a blank page

This is the error thrown on IE11 :

SCRIPT5005: String expected
js (26,286)

SCRIPT5022: Exception thrown and not caught.
polyfills.js (3234,3)

I'm enclosing the screen capture on on the console

I have included the API in my index.html like this :

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

It should include googlemaps after my polyfills.js, but I'm not sure on how to do that

I've tried to use agm-map, and others solutions but so far, nothing is working.

Answer 1

You could add the Google Maps script to the ngOnInit() method instead of in the tag.

let googleMapsScript = document.createElement('script')
googleMapsScript.setAttribute('src', 'https://maps.google.com/maps/api/js?v=3.38&key=YOURGOOGLEMAPSAPIKEY&libraries=places')
document.head.appendChild(googleMapsScript)

This will load the Google Maps script after the main JS for the application is loaded. I don't use Angular but a similar approach works well in VueJS.

Answer 2

I had the same issue. Not Angular but same issue.

I changed the following:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>

to

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geometry"></script>