Ionic Modal messes up Google Map


I have app with a google map. Clicking on pin routes to a page with location details. When opening and closing a modal on this page, then navigating back to the map, the map is visually messed up. Removing the modal corrects the map issue. Any suggestions on why this would happen?


do you mind providing a codepen with the issue?




anyone have any input?


To get around this I had to not cache the view. I get a google marker flashing but I can’t hold up progress. I did:

<ion-view cache-view="false">


Hi there, I found I was having the exact same issue… Unfortunately I needed the view to be cached. So for anyone who might need this in the future, ionicModalView triggers a ‘resize’ which seems to break the map. so you can use ionic.on(‘resize’) to deal with the issue… or just change the event name in ionic.bundle.js


I am having the same problem here. I tried using ionic.on(‘resize’) but that didn’t help. Not caching the view is also not an option for me (it doesn’t fix the issue for me anyway). Any suggestions and alternatives?


This worked for me.

google.maps.event.addDomListener(window, 'resize', function() {
            var lastCenter = map.getCenter();
            google.maps.event.trigger(map, 'resize');

And I also have another resize inside the map idle event listener:

var lastCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');

Hope this help.


I am still getting this error with a modal and google maps, is there an official solution or workaround for this situation? If so, can we have a codepen of the working code? Thx