My experience with Angular Google Maps has been mostly positive, except for one issue that I have encountered.
When attempting to add styles to the map using the styles input attribute, I encounter an error:
js?v=quarterly&callback=agmLazyMapsAPILoader&key=mykey:78 GET https://maps.googleapis.com/maps-api-v3/api/js/39/10/intl/ru_ALL/stats.js net::ERR_ABORTED 500
zone-evergreen.js:659 Unhandled Promise rejection: Could not load "stats". ; Zone: <root> ; Task: Promise.then ; Value: Error: Could not load "stats".
at HTMLScriptElement.__zone_symbol__ON_PROPERTYerror (js?v=quarterly&callback=agmLazyMapsAPILoader&key=AIzaSyCyzqB8Udgs8s8kthQzK61Sq7Vghu8LiyE:80)
at HTMLScriptElement.wrapFn (zone-evergreen.js:1218)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:167)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:480)
at invokeTask (zone-evergreen.js:1621)
at HTMLScriptElement.globalZoneAwareCallback (zone-evergreen.js:1647) Error: Could not load "stats".
at HTMLScriptElement.__zone_symbol__ON_PROPERTYerror (https://maps.googleapis.com/maps/api/js?v=quarterly&callback=agmLazyMapsAPILoader&key=AIzaSyCyzqB8Udgs8s8kthQzK61Sq7Vghu8LiyE:80:236)
at HTMLScriptElement.wrapFn (http://localhost:8100/polyfills.js:1231:43)
at ZoneDelegate.invokeTask (http://localhost:8100/polyfills.js:412:35)
at Zone.runTask (http://localhost:8100/polyfills.js:180:51)
at ZoneTask.invokeTask [as invoke] (http://localhost:8100/polyfills.js:493:38)
at invokeTask (http://localhost:8100/polyfills.js:1634:18)
at HTMLScriptElement.globalZoneAwareCallback (http://localhost:8100/polyfills.js:1660:21)
Even though the styles are correct and the map is successfully styled, this error continues to occur unexpectedly...
The specified styles are as follows:
testStyle = [
{
elementType: 'geometry',
stylers: [
{
color: '#f5f5f5',
},
],
},
];
Here is how I am implementing the styles:
<agm-map
[class.fullscreen]="(view$ | async) === 'map'"
[disableDefaultUI]="true"
[zoom]="12"
[zoomControl]="false"
[latitude]="56.946285"
[longitude]="24.105078"
[fitBounds]="true"
[styles]="testStyle"
>
<agm-marker
*ngFor="let object of objects$ | async"
[latitude]="object.point[0]"
[longitude]="object.point[1]"
[agmFitBounds]="true"
></agm-marker>
</agm-map>
Interestingly, if I provide empty styles like: testStyle = [];, the error does not occur.
After researching online, I discovered that this issue could be related to AdBlock. However, I have disabled all browser extensions, yet the error persists.