Map half loaded

I have on the first page of an Ionic4 app a Google Map.
When I log in, often the map doesn’t load well, it is half loaded.
If you move the app with your fingers, then it loads completely


I’m using the Google Maps API that is included in the index.html file in this way:

  <script id="google_script" src=""></script>

Then I have defined a component, used in the home page of the app.
This is the component:

    selector: 'google-map',
    templateUrl: './google-map.component.html',
    styleUrls: ['./google-map.component.scss']

export class GoogleMapComponent {

    position_base = {
        position_longitude: null,
        position_latitude: null

    constructor(private renderer: Renderer2,
                private element: ElementRef,
                private platform: Platform,
                @Inject(DOCUMENT) private _document) {
        this.apiKey = this.settingsManager.getGoogleMapsApiKey();

    public init(mapType, mapOptions): Promise<any> {
        this.mapType = mapType;

        return new Promise((resolve, reject) => {
            if ( == null) {
                // this.loadSDK().then((res) => {
                this.initMap(mapOptions).then((res1) => {
                }, (err) => {
            } else {
                reject('Google maps already initialised');

    private initMap(options): Promise<any> {
        const context = this;
        return new Promise((resolve, reject) => {
            const mapOptions = {
                zoomControlOptions: {
                    position: google.maps.ControlPosition.LEFT_CENTER
                clickableIcons: options.clickableIcons,
                zoomControl: options.zoomControl,
                mapTypeControl: options.mapTypeControl,
                scaleControl: options.scaleControl,
                streetViewControl: options.streetViewControl,
                rotateControl: options.rotateControl,
                fullscreenControl: options.fullscreenControl,
                styles: [.....]

   = new google.maps.Map(this.element.nativeElement, mapOptions);
  {minZoom: 6});

Why do you think the map does not load completely?
How can I debug this problem?

Thank you


Hmm, it could be because the DOM is not fully ready when you are creating the map.

Here in the conf app we have the map being created with ngAfterViewInit to make sure the DOM nodes are fully rendered.

1 Like