Angular 19 Google Maps Javascript SDK Does not load properly

Im currently working on Angular 19.1.7 based project where I am trying load google maps via Javascript SDK. Im using below in index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE&libraries=drawing"
defer></script>


In my map component I'm initialize the map like below:

HTML:

<div #mapContainer id="map"></div>


Component:

ngOnInit() {
initMap()
}

initMap(): void {
if (!window.google || !window.google.maps) {
this.toaster.error('Google Maps API is not available. Please check your internet connection.');
return;
}

try {
const mapOptions: any = {
center: new (window.google.maps.LatLng as any)(40.730610, -73.935242),
zoom: 12,
};

// Create the map
this.map = new (window.google.maps.Map as any)(this.mapContainer.nativeElement, mapOptions);

this.initDrawingManager();
window.google.maps.event.addListener(this.map, 'click', (event: any) => {
if (this.editMode === 'place-marker') {
this.addMarkerAtPosition(event.latLng);
} else if (this.editMode === 'none' && this.currentPolygonOverlay) {
}
});

} catch (error) {
this.toaster.error('Failed to initialize the map. Please refresh the page.');
}
}

initDrawingManager(): void {
// Check if drawing library is available
if (!window.google.maps.drawing) {
this.toaster.error('Map drawing tools are not available.');
return;
}

try {
// Create the drawing manager
this.drawingManager = new window.google.maps.drawing.DrawingManager({
drawingMode: null, // Initially set to null (hand tool)
drawingControl: true,
drawingControlOptions: {
position: window.google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
window.google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
editable: true,
draggable: true,
strokeColor: '#ff0800ff',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ca6f5fff',
fillOpacity: 0.35
}
});

// Set the drawing manager onto the map but hidden initially
this.drawingManager.setMap(null);

// Add event listener for when a polygon is complete
window.google.maps.event.addListener(
this.drawingManager,
'overlaycomplete',
(event: any) => {
this.drawingManager.setDrawingMode(null);

const polygonId = `user-polygon-${this.userCreatedPolygons.length + 1}`;
const polygonName = `User Polygon ${this.userCreatedPolygons.length + 1}`;

const newPolygon = event.overlay;
newPolygon.id = polygonId;

this.userCreatedPolygons.push({
polygon: newPolygon,
name: polygonName,
color: '#00FF00'
});

window.google.maps.event.addListener(
newPolygon,
'mouseup',
() => {
this.getPolygonCoordinates(newPolygon, polygonName);
}
);
window.google.maps.event.addListener(
newPolygon,
'click',
() => {
if (this.editMode === 'delete') {
this.deletePolygon(newPolygon);
}
}
);
this.getPolygonCoordinates(newPolygon, polygonName);
this.savePolygonToDatabase(newPolygon);
}
);
} catch (error) {
this.toaster.error('Failed to initialize drawing tools.');
}
}


Problem:

When I go to the component and reload the page. Map renders accordingly with any markers or polygons.

If I start interating with the maps( zoom / street-view) it gives the error in console below:

Access to XMLHttpRequest at 'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
​

Upon trying to use street view:

Access to XMLHttpRequest at 'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/SingleImageSearch' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.Understand this error js?key=AIzaSyC7_zVbYpp8R7UUvYT36GiyHvP8PqKpOh4&libraries=drawing:308 POST https://maps.googleapis.com/$rpc/go...js.v1.MapsJsInternalService/SingleImageSearch net::ERR_FAILED
​

I have set Application restriction to None and API restriction to None like below:



The same API call https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.MapsJsInternalService/GetViewportInfo Get successful upon page reload.

Any help would be appreciated.

Continue reading...