Angular-google-maps: Angular 2 Google Map not showing properly at Bootstrap Modal

[pelim]

you have to call the triggerResize() method

[cheawan]

Thanks peter. Would you mind pointing me to the right documentation on how to use the method?

[ghost]

had the same problem, fixed with:
this._mapsApiWrapper.triggerMapEvent('resize');

[rokobasilisk]

This doesn't seem to work in Typescript/Angular. The event doesn't actually seem to fire, not sure if it is an issue with the GoogleMapsApiWrapper, and related to issue #1200.

[kamlekar]

I have solved it!

But in my case, I was using agm-map instead of sebm-google-map.

From OP's code:

<div class="modal-body">
    <sebm-google-map [latitude]="maplat" [longitude]="maplng" [zoom]="mapzoom" *ngIf="isBrowser()" (mapClick)="mapClicked($event)">
    </sebm-google-map>
</div>

My code:

<agm-map #map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>
</agm-map>

The above code was inside google-agm.component.html. So, I visited google-agm.component.ts file and did the following changes:

import { MapsAPILoader, AgmMap } from '@agm/core';    // Added AgmMap
..
..

export class GoogleAgmComponent implements OnInit {
    @ViewChild('map') map: AgmMap;   // Fetching the child component through the "#map"
    ..
    ..
    ngOnInit() {
        ..
        ..
        this.resizeMap();
        ..
        ..
    }

    resizeMap() {
        this.map.triggerResize();
    }
}

[abdulraziqadvani]

@kamlekar worked perfectly. Thanks alot ! 👍

[Vincent-Alibert]

Hi, i was a same problem.
I resolve him when i added only

@ViewChild(AgmMap) public agmMap: AgmMap;

ty @kamlekar

[rohitgrover]

this doesn't work for me. any help i am using map component as a child component in my parent component and from there i am calling triggerResize().

[redent]

Using jQuery to listen for Bootstrap modal events, I fixed it this way:

@ViewChild('map') map: AgmMap;

ngOnInit() {
  $('.modal').on('shown.bs.modal', () => this.map.triggerResize());
}

Or using @ViewChild for the modal too (this requires AfterViewInit instead of OnInit):

@ViewChild('map') map: AgmMap;
@ViewChild('modal') modal: ElementRef;

ngAfterViewInit() {
  $(this.modal.nativeElement).on('shown.bs.modal', () => this.map.triggerResize());
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.