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.

Please try the solutions in https://stackoverflow.com/questions/45353619/angular4-application-running-issues-in-ie11 and let us know if they worked for you. — evan, Jul 25 '19 at 12:04
I see, thanks for your update. Have you also installed the packages? (https://blog.angularindepth.com/angular-and-internet-explorer-5e59bb6fb4e9) Are you using both es6 and es7? Ran npm install? Also please double check that all required polyfills are uncommented, and update your project's packages. Also try other solutions in https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11 and let me know if anything works. — evan, Jul 26 '19 at 11:12
Hi @evan my colleague did all that was said e.g commented the install and install the packages but no luck, it did not help. — Andy K, Aug 21 '19 at 14:19
Hi Andy, thanks for your update. Okay so can you share a reproducible code example? In e.g. codesandbox.io? I'll need to do some testing on my end to be able to help if the known solutions I've linked aren't working in your case. — evan, Aug 21 '19 at 14:36
@evan my colleague is working on that. He will put an update on it. Thank you. — Andy K, Aug 21 '19 at 15:39

score 6 · Answer 1 · answered Aug 22 '19 at 11:25

6

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.

answered Aug 22 '19 at 11:25

Damien McDonnell

181
6

This worked me after several days of issues faced on Angular. It worked on Angular for me. +1 – Eliotjse Sep 11 '19 at 13:54
One more mistake is i had yarn file but i did npm install which lead to lots of unsaid issues – Eliotjse Oct 19 '19 at 18:49
This link - https://stackoverflow.com/a/44276683/6568097 will be helpful to implement this in angular 7/8 – akhilsp Dec 16 '19 at 08:45

score 2 · Answer 2 · answered Nov 12 '19 at 19:56

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>

answered Nov 12 '19 at 19:56

Steve

121
1
2

2

Ended up removing async. Just defer seemed to resolve it. – Steve Nov 12 '19 at 20:55

Google Maps compatibility IE11 not working because of polyfills.js

2 Answers2

Linked