CODEWITHSUNDEEP
angulargoogle-maps
Parth Sekar
Parth Sekar

Reputation: 418

Angular google maps not reloading when I change options

I am trying to create an angular app with angular goggle maps components. My app has a dark-light theme switcher. I have created two map styles - a night style for the dark theme and a light version for the light theme respectively. When the theme is changed, I update the map options to change the map id as per the theme selection. But, it does not get reflected in the map appearance. My map markers are alright. Hence I didn't add that part of code here. Also, please note that I have masked my map ids in the below code.

My maps component ts

 @Input() position: GeolocationPosition;

  public markers: any[] = [];
  public options: google.maps.MapOptions;
  public mapId: string;

  private darkModeKey: string = "dark-mode";
  public themingSubscription: Subscription;

  constructor(
    private httpClient: HttpClient,
    private secretsService: SecretsService,
    private themingService: ThemingService,
    private storageService: StorageService,
  ) { }

  ngOnInit(): void {
    this.setMapOptions();

    this.loadMarkers();

    this.themingSubscription = this.themingService.theme.subscribe((theme: string) => {
      this.setMapOptions();
    });
  }

  private setMapOptions()
  {        
    this.options = {
      center: {
        lat: this.position.coords.latitude,
        lng: this.position.coords.longitude
      },
      zoom: 14,
      mapId: this.storageService.getItemByKey(this.darkModeKey) ?
        <dark-map-id> :
        <light-map-id>,
      maxZoom: 30,
      minZoom: 5,
    } as google.maps.MapOptions;
  }

html

<div>
  <google-map [options]="options" [width]="700" [height]="500" >
    <map-marker *ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
      [title]="marker.title" [options]="marker.options"></map-marker>
  </google-map>
</div>

what am I doing wrong? Or is this some maps component issue?

Upvotes: 1

Views: 1536

Answers (1)

Ashik
Ashik

Reputation: 106

This could be an issue with Angular not triggering change detection because, each time this.options changes, the variable reference doesnot change. Hence, angular thinks its the same value.

Try

this.options = {...this.options,
      center: {
        lat: this.position.coords.latitude,
        lng: this.position.coords.longitude
      },
      zoom: 14,
      mapId: this.storageService.getItemByKey(this.darkModeKey) ?
        <dark-map-id> :
        <light-map-id>,
      maxZoom: 30,
      minZoom: 5,
    }

Doing it in the es6 way changes reference to the variable as it creates a copy of the original this.options.

Upvotes: 4

Related Questions