-1

My portal is not loading in IE browser, while trying to google maps API It is a SPA application developed on Angular 5.

Tried below solution too.

Google Maps compatibility IE11 not working because of polyfills.js

Trenton McKinney
  • 56,955
  • 33
  • 144
  • 158
AKN
  • 33
  • 1
  • 9
  • 2
    Have to tried this https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11 – hrdkisback Oct 17 '19 at 09:46
  • First, please check the polyfill.ts file, make sure you have uncomment the related package reference for IE browser. And in the index.html page header, try to add ``. Second, try to use F12 developer tools to debug the web page, and check whether there have some error. Finally, please refer to [this sample](https://stackblitz.com/edit/angular-5-google-maps) to use Google Maps with Angular 5. – Zhi Lv Oct 17 '19 at 11:17
  • 1
    If still not working, can you post the Enough code to reproduce the problem as in [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). – Zhi Lv Oct 17 '19 at 11:17
  • Thanks for your reply , I tried the same as you suggested but no luck. I just refered google api in index file: under body tag also mentioned under head tag. – AKN Oct 18 '19 at 13:22
  • /** IE9, IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; – AKN Oct 18 '19 at 13:22
  • Even i cant load chrom itself too ..Getting the error -> js?key=AIzaSyAvQjRBJyNCatK8PFVcGyuyLVJ1o7qr7nU:53 Google Maps JavaScript API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error Your site URL to be authorized: http://localhost:4200/ – AKN Oct 18 '19 at 13:23
  • Please check [this article](https://developers.google.com/maps/premium/troubleshooting-auth), if you use your google API key or client ID in a site which is not authorized, the Maps JavaScript API writes error message "Your site URL to be authorized", you could check it and get the correct API Key or client ID. here are some articles about google map api Authentication and Authorization, you could refer to it. [link 1](https://developers.google.com/maps/premium/previous-licenses/clientside/auth) and [link 2](https://developers.google.com/maps/documentation/javascript/get-api-key) – Zhi Lv Oct 22 '19 at 09:06

1 Answers1

0

I had the same issue weeks back, possible solutions

1) You have the exact dependency as it was in package json and if you are having yarn.lock make sure you run yarn install instead of npm install.

2) Uncomment the code in polyfills.js

3) Your map script should be loaded after your main script

4) If all this doesn’t work then comment on index html the google api script and add the JavaScript code to add it or append on the dom in one of your component constructor. Copied from Stack Overflow: https://stackoverflow.com/a/57608295/3012588

5) Finally check your view compatible settings in IE.

I ensured these points now maps working fine on IE and Chrome.

Eliotjse
  • 123
  • 1
  • 15