Google map shows part of the map when page navigations-CodePudding

I have used

CodePudding user response：

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
    };
  }
}