bug(google-maps): Zoom not updated on centerChange

[cesarcgfg]

What are you trying to do?

Trying to zoom map after center change:
google-maps.component.html

<google-map
    height="600px"
    width="100%"
    [center]="center"
    [zoom]="zoom"
    (mapMousemove)="move($event)"
    (centerChanged)="centerChanged()">
    <map-marker
      *ngFor="let markerPosition of markerPositions"
      [position]="markerPosition"
      [options]="markerOptions"
      (mapClick)="openInfoWindow(marker)"
    ></map-marker>
</google-map>

google-maps.component.ts

export class GoogleMapsComponent {
  @Input() center!: google.maps.LatLngLiteral;
  zoom = 17;
...

 centerChanged() {
    console.log('center changed');
    this.zoom = 17;
  }

What troubleshooting steps have you tried?

Zoom is not changed

Reproduction

Steps to reproduce:

1. User changes zoom
2. User clicks on marker link that updates center variable.
3. Center is changed, console.log is fired but zoom is not updated

Environment

• Angular: 12.2.6
• Browser(s): Firefox/Chrome
• Operating System Windows

[brian-weasner]

Also having this issue

What does NOT work:

• Setting mapZoom in next tick with window.setTimeout
• If mapZoom it set to 0 and then immediately set to this.foo.mapZoom (within same tick)
• Setting via the GoogleMap instance this.googleMapComponent.zoom = this.foo.mapZoom; (via @ViewChild)
  • As I thought this might have been an issue with the angular [zoom] input not detecting a change even though the map internally has a new zoom level

What works (work arounds for now)

• If map is hidden and redisplayed it is at correct zoom.
• If mapZoom it set to a different zoom (ie. 0) and then In next tick set to this.foo.mapZoom IT DOES work (but is very jittery)

// Set to default zoom
this.mapZoom = this.mapOptions.zoom;
window.setTimeout(() => {
  // In next tick set map to foo's zoom
  this.mapZoom = this.foo?.mapZoom ?? this.mapOptions.zoom;
});

[brian-weasner]

Did some more digging and it seems that my zoom is not updating because I have bounds set previously.

Tried to Reset the Bounds and then set the zoom after map is idle, similar to the solution here: https://stackoverflow.com/a/4065006

**Does not work**, but think I am getting closer to the issue.

@ViewChild('googleMap') private googleMap?: GoogleMap;

...

public setZoom(): void {
  // Add map idle listener for after map bounds are reset
  this.googleMap.idle.pipe(
    first() // Unsubsribe after first emit of idle event
  ).subscribe(() => {
    this.mapZoom = this.foo.mapZoom; // Tried setting Input property
    this.googleMap.zoom = this.foo.mapZoom; // Tried setting on google map instance itself
  });
  // Reset Google Map Bounds.
  this.googleMap.fitBounds(new google.maps.LatLngBounds());
}