Ionic 4 with AGM map be blank gray on leaving page

Ionic Framework Ionic Angular
1

I’m using AGM map with ionic 4 map working fine for first time only when I go out from page and back again map be gray and blank any help ?

1 Like
2

Do you have an example? Whats the code you’re using? What’s the markup look like? We cannot guess the issue from nothing. Please provide a demo project

3 
my html file : 
<agm-map [latitude]="toInteger(nearProperties[0]?.lat)"
             [longitude]="toInteger(nearProperties[0]?.lng)"
             [zoom]="7"
             #agmMap>
      <agm-marker-cluster maxZoom="13"
                          (clusterClick)="showSliderView()"
                          imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker *ngFor="let marker of nearProperties; let i= index"
                    [latitude]="marker.lat"
                    [longitude]="marker.lng"
                    [iconUrl]="{
                      url: i === this.selectedIndex ? 'assets/img/marker_active.svg' :
                    'assets/img/marker.svg',
                      scaledSize: {
                      width: 30,
                      height: 60
                      }
                      }"
                    (markerClick)="markerClicked(slides,i)">
        </agm-marker>
      </agm-marker-cluster>
    </agm-map>
---------------------------------------
my ts : 
@ViewChild('agmMap', { static: true }) agmMap: AgmMap;
ionViewDidLoad() {
    this.agmMap.triggerResize();
  }
4

Can you put this into a “working” github project to inspect?

5

sorry for answering late
i pushed a sample of two related page here

6

Hi
have you been able to resolve this?
I am facing the same issue in Ionic Modal when using the plain vanilla JS SDK and the @angular/google-maps component.

Second time opening modal, the map is white, until the user drags on the map surface.

Regards
Tom

7

Here is a repo where AGM is not working in a modal

Only the API key is blank in the repo

Happy to PM u one

I also posted an issue at AGM’s repo at github

8

Solved by resizing the div after view. Not clean, but works. The resize event does not seem to be supported anymore, even though it is reported many times as solution (in the past)

    setTimeout(() => {
      document.getElementById('map-parent').style.width = "100%";
    }, 10);