Google map shows part of the map when page navigations

Issue

I have used Angular Google map component like so:

<google-map [options]="location?.googleMap?.mapOptions" height="100%" width="100%">
  <map-marker
    #marker="mapMarker"
    *ngFor="let mapPinAddressMarkerPosition of location?.googleMap?.mapPinAddressMarkerPositions"
    [position]="mapPinAddressMarkerPosition?.markerPosition"
    [options]="mapPinAddressMarkerPosition?.markerOptions"
   >
  </map-marker>

  
</google-map>

It is working fine for the first time. But my question here is if I'll do any page navigation and come back to the Map tab then it shows part of the map. Do you know why?

Note:

The above happens to me When I pressed the Marker pin and it redirects to another tab page programmatically and then try to press the Map tab again. e.g. this.router.navigateByUrl('tabs/leads') after clicked the Pin icon.

Solution

I created a boilerplate ionic tab project and put the google map directive on the first tab page using the same angular library. I was able to get it to work by wrapping the map options object inside NgAfterViewInit lifecycle method and loading the google map directive when the options object was loaded. See code example below:

Note: I am sure there is a better way of doing this other than the null/AfterViewInit method, but this was my first attempt to resolve by suspecting a lifecycle issue. I'll update this answer after experimenting with alternative approaches.

Tab1.html

  <div if="options != null">
    <google-map [options]="options"></google-map>
  </div>

Tab1.ts

export class Tab1Page implements AfterViewInit  {
  
  options: any = null;

  constructor() {}
 
  ngAfterViewInit() {
    options: google.maps.MapOptions = {
      center: {lat: 40, lng: -20},
      zoom: 4
    };
  }
}

Answered By - lee whitbeck