I am getting CORS error and I am not able to load google maps. I am using Angular 8.
Initial call to load map services is successful, but the next call, it gives error.
This is how I am loading the google map
export class MapLoaderService {
private static promise: Promise<any>;
public static load(): Promise<any> {
let key = "";
const mapsUrl = `https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing,places&key=${key}&callback=__onGoogleLoaded`;
// First time 'load' is called?
if (!this.promise) {
// Make promise to load
this.promise = new Promise((resolve) => {
this.loadScript(mapsUrl);
// Set callback for when google maps is loaded.
window["__onGoogleLoaded"] = ($event: any) => {
resolve("google maps api loaded");
};
});
}
// Always return promise. When 'load' is called many times, the promise is already resolved.
return this.promise;
}
//this function will work cross-browser for loading scripts asynchronously
static loadScript(src: any, callback?: any): void {
var s: any, r: any, t: any;
r = false;
s = document.createElement("script");
s.type = "text/javascript";
s.src = src;
s.onload = s.onreadystatechange = function () {
if (!r && (!this.readyState || this.readyState == "complete")) {
r = true;
if (typeof callback === "function") callback();
}
};
t = document.getElementsByTagName("script")[0];
t.parentNode.insertBefore(s, t);
}
}
and then using like:
ngAfterViewInit() {
MapLoaderService.load().then(() => {
this.setupMapEvents();
});
}
Note: It was working few weeks back, but all of sudden, I am getting this error.
Also, on google console, I added restrictions: