[Resolved] Map doesn't automatically zoom properly in a Bootstrap 4 collapsed div

[Author]

Posts

[Darryl]

I have a Toolset map inside of a Bootstrap 4 collapse (hidden link)

If I load the page with the div collapsed (the default) all the markers are in the right place but the map is zoomed right out.

If I add the "show" class to the div, forcing the div to display un-collapsed, the map renders just as you would expect and is zoomed in to show all markers.

<a class="btn btn-primary" data-toggle="collapse" href="#collapsemap" role="button" aria-expanded="false" aria-controls="collapsemap"><i class="fad fa-map-marked-alt"></i> Show/Hide Map</a></p>
    <div class="collapse mb-3" id="collapsemap">
      [wpv-map-render map_id="map-worksites" map_height="500px" single_zoom="15" cluster="on" spiderfy="on"][/wpv-map-render]
    </div>

Here's video to help:
hidden link?

[Darryl]

I just noticed that I have the map zoom set to "15". I just added that to see if it was just a problem the ditty to automatically zoom to show all markers.

[Luo Yang]

Hello,

Thanks for the details, I can see the problem in my localhost.

It is not related with Booststrap, the problem occurs when google map HTML div tag is hidden.

In your case, you can try with JS codes to reload the zoom settings after user click the "Show/Hide Map" link, for example:

jQuery( 'a[aria-controls="collapsemap"]' ).click(function( event, data ) {
    WPViews.view_addon_maps.reload_map('map-worksites');
});

[Darryl]

My issue is resolved now and works better than I set out to do. Thank you!