This is a little example of what I'm trying to do : https://codepen.io/remifroger/pen/ZZWgbM
I would like to build a tabs design, with one map in each tab. I use jQuery to deal with it but I have a trouble when I resize the window.
I already tested to use map.updateSize() in each click event but it doesn't work, do you have any ideas to fix this behavior ?
Problem comes from the
hide() method which applies a
display: none on a parent element of my div containing the map => it also affects a
display: none on the map div's; and this generates the unwanted behaviors
So to fix the problem, instead of show() and hide() methods, I use the visibility property (with jQuery :
$("#id").css('visibility', '...')) which doesn't generate any
And I put the content of the tab content in
position: absolute to eliminate spaces
I updated the CodePen, but I'm still open to any improvement, this method doesn't seem optimal !