Support » Plugin: Maps Builder - Google Maps Plugin » re-initialize map when displaying a hidden div

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author Devin Walker


    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.

    Plugin Author Devin Walker


    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?

    Plugin Author Devin Walker


    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.


    Plugin Author Devin Walker


    It’s been resolved for Twitter bootstrap tabs in the new version coming out. You can find that here on Github:

    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.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘re-initialize map when displaying a hidden div’ is closed to new replies.