Google maps only load the first time, second time it is gray

Question

I have created an Ionic 2 / Angular 2 App. I have integrated Google Maps and it works fine. However the second time the Google Maps appears completely gray. I have searched the internet and tried different solutions to solve it. However, none of the solutions below work: - google.maps.event.trigger(this.map, 'resize'); - google.maps.event.clearInstanceListeners / this.map.detach(); / this.marker.setMap(null);

When I resize the view in chrome then the maps which appeared in gray is suddenly shown. So how can I trigger this resize manually. I hope you can help.

My code can be found here https://github.com/marinusgeuze/metjekindnaarbuiten.

Best regards, Marinus Geuze

===========================================

Issue is solved by adding next line of code: setTimeout(() => google.maps.event.trigger(this.map, 'resize'), 600);

Answer 1

I didn't have exactly the same issue, but something similar happen when using LeafletJS in my Ionic 2 app, and a call to their invalidateSize function on a small timeout fixed the issue for my app. Here's an example:

ionViewLoaded() {
    console.log('ObservationDetails.ionViewLoaded');

    // Leaflet setup calls here
    ...

    // invalidateSize must be called because the page hasn't been drawn, only loaded,
    // and the map div will get resized causing the "gray block/unloaded map tile"
    // problem. Invalidating the map will fix that, but the call needs a slight 
    // delay before firing...
    setTimeout(() => this.map.invalidateSize(), 600);
}

Answer 2

Solution for map, Use Below code of line to resolve the issue :

// you must use "map" variable name, or you can use your defined variable name
// Example : var map = (new google.maps.Map(...));

setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);