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 display: none

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 !


Try using map.setTarget(none) before your .hide()method and then map.setTarget(yourMapContainer) and map.updateSize() after your .show() method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.