Google map resize not working after clicking back button on Ember
I'm having some problems in my Ember app when I use the back button to navigate to a Google Map page using a Fusion Table layer. On a new page load, it looks like this:
After clicking one of the contacts and switching to another view, when I click the back button, the following happens:
The size and position of the gray bars vary.
I've tried doing google.maps.event.trigger(map, 'resize')
and calling map.setZoom(map.getZoom())
with no effect. I also made sure the containers have a width and height.
Just to be clear, this is an Ember app, so clicking the back button is not a complete page reload, but rather a replacement for Ember controllers / views. I was hoping that you just need to call the resize on such a transition, but resizing doesn't seem to be enough even if you call it directly from the console.
One more thing: other page transitions (like clicking on other elements that trigger either link-to
or transitionTo
on the map) work fine. This only happens when the transition occurs with the Back button that the card does not work.
Any ideas?
source to share
I just remembered that I did manage to "fix" this problem, but never got to an answer.
What was happening in my case was that the code I was using was trying to optimize render times by maintaining the map canvas, attaching it to a tag body
when the view was deleted in willDestroyElement
, and then moving it back to the view whenever the view is loaded again in didInsertElement
. Apparently there was nothing on google maps. So I ended up expanding the code and updating so that the map was discarded and a new instance was created every time the view was displayed.
source to share