Hide/Show div event

Question

I'm using bootstrap to show and hide a modal, attributes data-toggle and data-target

When the modal opens, it should load a google map, you have to call resize event so that the map is displayed (like when you click F12, known issue)

Question is, I can't use this resize solution as I am not showing/hiding (adding/removing class) manually, the bootstrap class is handling this, so I don't know where to call the resize

This is the 'header' for the modal

<div class="modal fade" id="locateDialog" tabindex="-1" 
   role="dialog" aria-labelledby="Stripe Payment" aria-hidden="true">

<div class="col-md-12">
  <div  id="googleMapUser" class="mapUser">

  </div>
</div>

And this is where it's called (clicking an icon)

<div class="col-md-12">
  <h3><i class="icon-user" style="font-size:48px;" 
        data-toggle="modal" data-target="#stripeDialog">
        </i>&nbsp; My Levels</h3>
</div>

If I call this inside any button (after loaded when a user clicks on it), the map is displayed

google.maps.event.trigger($('#googleMapUser')[0], 'resize');

But I want to load this when it loads, I already tried inside the 'myMap' (google map method in the js file), when the document is ready (but the div is hidden so doesn't work) and everywhere.

Where should I call the resize? is there another option other than the mutation observer?

Thanks in advance

Answer 1

I believe you're looking for the modal events . Using this you should be able to trigger some code to execute once the modal is shown with something like this:

$('#myModal').on('shown.bs.modal', function (e) {
    // do something...
});