Ionic Modal messes up Google Map

1

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?

1 Like
2

do you mind providing a codepen with the issue?

3

@cyprusglobe http://codepen.io/benjamingeorge/pen/QwQZqB

4

anyone have any input?

5

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">
6

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

7

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?

8

This worked for me.

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

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

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

Hope this help.

9

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