I am working on integrating the Google Maps Javascript API and MarkerClusterer into my Angular 6 application. However, I encountered a fatal error after compiling the application with the --prod flag. The error message I receive when trying to load map data is as follows:
ERROR TypeError: Assignment to constant variable. at C._cluster (46.47bcce1c4da198696d2d.js:1:59803) at C.load (46.47bcce1c4da198696d2d.js:1:56646) at z.calculate (46.47bcce1c4da198696d2d.js:1:62572) at markerClusterer.map.render (46.47bcce1c4da198696d2d.js:1:68639) at markerClusterer.map.addMarkers (46.47bcce1c4da198696d2d.js:1:68161)
at t.createMapMarkers (46.47bcce1c4da198696d2d.js:1:70426) at e._next (46.47bcce1c4da198696d2d.js:1:71953) at e.__tryOrUnsub (main.256af8f39dd3b7bd3744.js:1:534499) at e.next (main.256af8f39dd3b7bd3744.js:1:533644) at e._next (main.256af8f39dd3b7bd3744.js:1:532696)
When I use ng serve or ng build without the --prod flag, everything works fine. The target setting in tsconfig.json, tsconfig.app.json, and tsconfig.spec.json is es5.
The methods I'm using in the Angular component to display the map are as follows:
mapInitializer() {
this.apiMarkers = [];
this.coordinates = new google.maps.LatLng(this.lat, this.lng);
this.mapOptions = {
center: this.coordinates,
zoom: 8,
gestureHandling: 'cooperative',
fullscreenControl: true,
},
this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
this.markerClusterer = new MarkerClusterer({map: this.map});
}
createMapMarkers(){
//clear before rendering new
this.markerClusterer.clearMarkers();
// reset zoom level for clusterer (integer values only)
this.map.setZoom(8);
//creating a new info window with markers info
var infoWindow = new google.maps.InfoWindow({
content: "",
disableAutoPan: false,
});
var markers = [];
this.data.forEach((siteInfo )=> {
if(siteInfo.lat && siteInfo.long){
let label = siteInfo.Address;
let HazId = siteInfo.HazId;
let marker = new google.maps.Marker({
position: new google.maps.LatLng(siteInfo.lat, siteInfo.long),
title: siteInfo.Address,
icon: icon[siteInfo.Color],
...siteInfo
});
//Adding marker to markers array
markers.push(marker);
}
})
// add markers to map
this.setMapBounds();
this.markerClusterer.addMarkers(markers);
}
The mapInitializer() function is called within the AfterViewInit() method, and the createMapMarkers() function is called after retrieving data from the server. If I switch the MarkerClusterer algorithm to GridAlgorithm, the error disappears; however, the default algorithm performs better.
Currently, I am using the following versions: "@googlemaps/google-maps-services-js": "3.2.5", "@googlemaps/markerclusterer": "1.0.22",
Any suggestions on resolving this error effectively would be highly appreciated.
Thank you in advance!