How to display google map field in hidden div?

Question

I have a Google Map Field in my form. I'm editing the theme of the form and I'm using a jquery but the map is broken.

The map is inside a div and the code of the template is this:

And here is the Jquery:

$("#show-block-3").click(function () {
         if ($('#hidden-block-3').is(":visible")) {
             $(this).html($(this).html().replace(/Hide/, 'Show'));
                var center = map.getCenter();
                google.maps.event.trigger(map, "resize");
                map.setCenter(center);

         } else {
              $('div#hidden-block-1').hide();
              $('div#hidden-block-2').hide();
              $('div#hidden-block-4').hide();
              $('div#hidden-block-5').hide();
              $('div#hidden-block-6').hide();
              $('div#hidden-location-block').hide();
         }
         // Do it afterwards as the operation is async
         $("#hidden-block-3").slideToggle("slow");

});(jQuery);

I just tried this:

var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);

But the result is still the same. I don't know where else to put that code.

Am I missing something? Does anybody know how to fix this? I'm not using vertical tabs or any tabs that group field module has in the template and in the form. I would to stick with the custom code that I already have. Just need to fix the map.

Thank you!

Answer 1

If anyone is still interested in this answer, I managed to achieve this by making a css class:

.hide-map {
    opacity: 0;
}

I did mine in angularjs, but in JQuery I'm sure you could use some sort of toggle to enable/ disable the css class when it has loaded.