re-initialize map when displaying a hidden div

This question has been asked a few times and we just plain haven’t gotten around yet to resolving it… my apologies there. We’ll try to take a hard look at resolving this in the next version.

Thanks Devin!

I’m having the same issue. Tried using visbility: hidden but that didn’t work either.

Yeah it’s going to need some js most likely to initialize it once unhidden or displaying in a tab, for instance.

Exactly. We need a function that could be triggered once the map’s container is shown. The now-visible container would then be used to re-calculate the position and center of the map, and we would all dance a jig of joy…
…and joyfullness, Charlie.

This definitely deserves a major +1. It would be a fantastic add-on…

Is there any hope You can fix this issue soon?

It’s at the top of our enhancement’s list. We’re hoping to get to it really soon because it’s the number 1 request we receive.

Sad to see that after the 2-3 months nothing is still changed… Major development started 3 weeks ago, but sadly we can’t touch any results.

Came here to ask the same question. I dug around and I hoped the following would work:

google.maps.event.trigger(window.gmb_data[mapId], “resize”);

where you’d get the mapId from the data attribute of the .google-maps-builder-wrap but sadly its not working.

It really sucks because it would have worked in my design so well to have the maps behind a toggle…

Has this issue been resolved yet. Really need to trigger google.maps.event.trigger(map, ‘resize’) as the map shortcodes need to be in responsive tabs on a site I’m working on.

Thanks
Aaron

It’s been resolved for Twitter bootstrap tabs in the new version coming out. You can find that here on Github: https://github.com/WordImpress/google-maps-builder

Great, thanks for that Devin, I’ll give it a try with the bootstrap tabs so.

For anyone else who is trying to get it working with something else, here is a quick jQuery solution I figured out yesterday just after posting. I’m using mulitple map builder shortcodes inside the responsive tabs shortcodes. It gets the number of maps with the ‘google-maps-builder’ class and resizes the maps when a tab is clicked so that the current map will always render correctly. Seems to work perfect for me.

$('.responsive-tabs__list__item').on( "click", function() {
          var numItems = jQuery('.google-maps-builder').length;
          for(var i=0; i< numItems; i++){
             google.maps.event.trigger(document.getElementsByClassName("google-maps-builder")[i], 'resize');
          }
        });

I have Github (2.0) version installed and map re-initializing still doesn’t work with Collapse-O-Matic.

this solution has not been implemented with Collapse-O-Matic… yet.
we’ll add this when we get a chance.
the plugin is on github, feel free to fork it and add the solution yourself.

Baden, thank you for the feedback, but sadly I’m not code writer or plugin developer, that’s why I’m using Collapse-Pro-Matic.