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:          


        

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>