Angular 19 Google Maps JavaScript SDK не загружается должным образом ⇐ Javascript

[Anonymous]

В настоящее время я работаю над проектом на основе Angular 19.1.7, где я пытаюсь загрузить карты Google через JavaScript SDK. Я использую ниже в index.html: < /p>

Код: Выделить всё

 
< /code>
В компоненте моей карты я инициализую карту, как ниже: < /p>
html: < /p>

< /code>
Компонент: < /p>
      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.');
}
}
< /code>
Проблема: < /p>
Когда я перехожу в компонент и перезагрузить страницу. Карта соответственно с любыми маркерами или многоугольниками. />'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.mapsjsinternalservice/getViewportinfo'
Из Origin 'http: // localhost: 4200'.  /> 'Запрашиваемое заголовок CONCEST-CONTROL-ALULAD-ORIGIN' присутствует
resource.
< /blockquote>
При попытке использовать уличный вид: < /p>

/>'https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.mapsjsinternalservice/singleimagesearch'
Из Origin 'http: // localhost: 4200' был заблокирован политикой Cors:
response to preflid /> 'Access-Control-Allow-Origin' Заголовок присутствует в запрошенном
resource.ronstand этой ошибки
js? Key = aizasyc7_zvbypp8r7uuvytt36giyhvp8pkpoh4 & libraries = рисунок: 308
post
post
post
post
post
post
post
post
post
post
/>https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.mapsjsinternalservice/singleimagesearch
net :: err_failed 

Я установил ограничение применения на ни одно и api. />   
Тот же вызов API https://maps.googleapis.com/$rpc/google.internal.maps.mapsjs.v1.mapsjsinternalservice/getViewPortInfo 

Получить успех после перезагрузки страницы.
>

Подробнее здесь: https://stackoverflow.com/questions/797 ... d-properly