Google Maps MarkerClusterer throwing: ERROR TypeError: Assignment to constant variable

Question

I am currently using the Google maps javascript API and MarkerClusterer as part of an overall Angular 6 application. After compiling the application with the --prod setting, I receive the following fatal error when loading the map data:

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)

Everything works fine when using ng serve or ng build without the --prod option. The target setting is es5 in tsconfig.json, tscofig.app.json and tsconfig.spec.json.

The methods 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 (interger 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() is called inside the AfterViewInit() method and the createMapMarkers() is called after the data is retrieved from the server. If I change the MarkerClusterer algorithm to GridAlgorithm the error goes away; however, the default algorithm performs much better.

currently using the following versions: "@googlemaps/google-maps-services-js": "3.2.5", "@googlemaps/markerclusterer": "1.0.22",

Any input on how to effectively resolve this error would be appreciated.

Thanks in advance!

Answer 1

I ran into the same error today on a non-Angular project. My production build settings compress the code using UglifyJsPlugin and turning the unused setting off fixed this issue for me:

new UglifyJsPlugin({
  uglifyOptions: {
    ecma: 5,
    compress: {
      unused: false, // <-- Set this to false
    },
  },
}),