Issue
On Nov 16, 2023, I started facing the issue with Google Maps in my Angular Application. Google Maps is throwing 403 Errors, and the maps are not loading (shows a blank page). Though my API Key is valid.
Below are the configurations of my Angular and System Application:
- Application Angular Version: ~13.1.0
- Angular CLI Version: 13.1.4
- Node Version: 16.14.0
- NPM Version: 8.3.1
- OS: win32 x64
Error Image:
CODE:
index.HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular Map Issue</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://maps.googleapis.com/maps/api/js?key=API_Key"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Google-map-component: HTML:
<!--start:Map-->
<google-map class="map" height="95vh" width="100%">
<!--start:Map Markers-->
<map-marker *ngFor="let site of sites"
[position]="{ lat: site.lat, lng: site.lng }"
[options]="{}"
(mapClick)="displaySiteDetails(site)">
</map-marker>
<!--end:Map Markers-->
</google-map>
<!--end:Map-->
TS
import { Component, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { GoogleMap } from '@angular/google-maps';
import { SitesService } from '../core/services/sites.service';
@Component({
selector: 'app-google-map',
templateUrl: './google-map.component.html',
styleUrls: ['./google-map.component.scss']
})
export class GoogleMapComponent implements OnInit {
sites = [
{
"siteDisplayName": "Site Name",
"streetAddress": "Address",
"city": "City",
"state": "State",
"zipcode": "10000",
"siteId": 1,
"oldSiteID": 1,
"siteName": "Name",
"lat": 34.255555,
"lng": -100.255555,
"siteMap": null
},
{
"siteDisplayName": "Site Name",
"streetAddress": "Address",
"city": "City",
"state": "State",
"zipcode": "10000",
"siteId": 1,
"oldSiteID": 1,
"siteName": "Name",
"lat": 34.255555,
"lng": -100.255555,
"siteMap": null
},
{
"siteDisplayName": "Site Name",
"streetAddress": "Address",
"city": "City",
"state": "State",
"zipcode": "10000",
"siteId": 1,
"oldSiteID": 1,
"siteName": "Name",
"lat": 34.255555,
"lng": -100.255555,
"siteMap": null
},
{
"siteDisplayName": "Site Name",
"streetAddress": "Address",
"city": "City",
"state": "State",
"zipcode": "10000",
"siteId": 1,
"oldSiteID": 1,
"siteName": "Name",
"lat": 34.255555,
"lng": -100.255555,
"siteMap": null
},
];
@ViewChild(GoogleMap, { static: false }) map: GoogleMap;
constructor(
private title: Title,
private siteService: SitesService
) {
this.title.setTitle("Site View Page");
}
ngOnInit(): void {
console.log("ngOnInit");
}
ngAfterViewInit(): void {
if (this.sites && this.sites.length>0) {
this.setMapBounds();
}
}
displaySiteDetails(site: any) {
console.log("displaySiteDetails", site);
}
private setMapBounds() {
let bounds = new google.maps.LatLngBounds();
this.sites.forEach((site: any) => {
bounds.extend(new google.maps.LatLng(site.lat, site.lng));
});
let ne = bounds.getNorthEast();
let sw = bounds.getSouthWest();
if (Math.abs(ne.lat() - sw.lat()) < 2) {
bounds.extend(new google.maps.LatLng(ne.lat() + 2, ne.lng()));
bounds.extend(new google.maps.LatLng(sw.lat() - 2, sw.lng()));
ne = bounds.getNorthEast();
}
if (Math.abs(ne.lng() - sw.lng()) < 2) {
bounds.extend(new google.maps.LatLng(ne.lat(), ne.lng() + 2));
bounds.extend(new google.maps.LatLng(sw.lat(), sw.lng() - 2));
sw = bounds.getSouthWest();
}
this.map.googleMap.fitBounds(bounds);
this.map.googleMap.setCenter(bounds.getCenter());
this.setMapRestrictions(ne, sw);
}
private setMapRestrictions(ne: google.maps.LatLng, sw: google.maps.LatLng) {
let options: google.maps.MapOptions = this.siteService.mapOptions;
options.restriction = {
latLngBounds: {
north: ne.lat() + 1,
south: sw.lat() - 1,
east: ne.lng() + 1,
west: sw.lng() - 1,
},
strictBounds: false
};
this.map.googleMap.setOptions(options);
}
}
Packages Used:
"dependencies": {
"@angular-material-components/datetime-picker": "^7.0.0",
"@angular-material-components/moment-adapter": "^7.0.0",
"@angular/animations": "~13.1.0",
"@angular/cdk": "~13.1.0",
"@angular/common": "~13.1.0",
"@angular/compiler": "~13.1.0",
"@angular/core": "~13.1.0",
"@angular/forms": "~13.1.0",
"@angular/google-maps": "^13.2.2",
"@angular/localize": "~13.1.0",
"@angular/material": "~13.1.0",
"@angular/material-moment-adapter": "~13.1.0",
"@angular/platform-browser": "~13.1.0",
"@angular/platform-browser-dynamic": "~13.1.0",
"@angular/router": "~13.1.0",
"@azure/msal-angular": "^2.5.8",
"@azure/msal-browser": "^2.37.1",
"@fullcalendar/angular": "^6.1.8",
"@fullcalendar/core": "^6.1.8",
"@fullcalendar/daygrid": "^6.1.8",
"@fullcalendar/timegrid": "^6.1.8",
"@microsoft/applicationinsights-web": "^2.7.2",
"@ng-bootstrap/ng-bootstrap": "^11.0.0",
"@types/intro.js": "^5.1.1",
"@types/lodash": "^4.14.178",
"@types/moment-timezone": "^0.5.30",
"@videogular/ngx-videogular": "^5.0.1",
"apexcharts": "3.33.0",
"bootstrap": "^4.6.0",
"crypto-js": "^4.1.1",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"hls.js": "^1.3.3",
"html2pdf.js": "^0.10.1",
"intro.js": "^7.2.0",
"jquery": "^3.6.0",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.29",
"jstree": "^3.3.12",
"lodash": "^4.17.21",
"moment-timezone": "^0.5.34",
"ng-apexcharts": "1.7.0",
"ngx-cookie-service": "^13.2.1",
"ngx-perfect-scrollbar": "^10.1.1",
"ngx-toastr": "^14.2.2",
"object-path": "^0.11.8",
"perfect-scrollbar": "^1.5.5",
"rxjs": "^7.5.2",
"socicon": "^3.0.5",
"tslib": "^2.3.0",
"xlsx": "^0.18.5",
"xlsx-js-style": "^1.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^13.1.4",
"@angular/cli": "~13.1.2",
"@angular/compiler-cli": "~13.1.0",
"@types/core-js": "^2.5.5",
"@types/crypto-js": "^4.1.1",
"@types/jasmine": "~3.10.0",
"@types/jquery": "^3.5.14",
"@types/jstree": "^3.3.41",
"@types/node": "^12.11.1",
"@types/rx": "^4.1.2",
"@videogular/ngx-videogular": "^5.0.1",
"first-input-delay": "^0.1.3",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
To resolve this I have added a version number like this <script src="https://maps.googleapis.com/maps/api/js?v=3.53&key=API_KEY"></script> and this is working fine but It is not working if I add any version except 3.53 or remove the version.
I Also tried creating a new scratch angular application with same configuration and version, but in that it is working fine even when I don't add any version number.
Currently, my Angular version is 13.1.0, and any Google Maps version other than 3.53 is not working for my application.
Additionally, when I don't pass the version in the Maps API URL in Angular Application 16, the maps work fine. However, if I don't pass the version in Angular Application 13, the maps do not work as expected. Is there any reason behind this?
Solution
After digging more into the Packages, I found out that because of Application Insights, the Google Maps API was throwing a 403 error. Hence to overcome this issue we need to add a config of excluding the Google APIs domain, which fixed the issue.
private initializeApplicationInsights() {
this.appInsights = new ApplicationInsights({
config: {
instrumentationKey: environment.appInsightsInstrumentationKey,
enableAutoRouteTracking: true,
enableCorsCorrelation: true,
correlationHeaderExcludedDomains: ['*.googleapis.com'],
}
});
this.appInsights.loadAppInsights();
this.addCustomTelemetryProperties();
}
After doing this, there is no need to add the version number in the script tag (Working for me).
Answered By - Vishwas Acharya
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.