SOLVED: Calling Mapbox's map.resize() method from within jQuery

SOLVED: Calling Mapbox's map.resize() method from within jQuery

I have a Mapbox map embedded on a page, which loads into a sliding panel which is controlled by jQuery.

If I change the browser window size and toggle the panel, the map often appears only partially filling its container. This is a known issue with the Mapbox GL API. 

From their documentation:


If you’re hiding your map initially with something like display:none and showing it dynamically with JavaScript, it may have some problems appearing and sizing correctly. The map can’t figure out its own size when it’s hidden from the page, since it doesn’t have a size in the browser’s calculation.

With Mapbox GL JS you can call   map.resize()   to detect and resize the map 

So, I need to call Mapbox's map.resize() function from within my jQuery code, when the sliding panel is opened.  Trouble is, I can't seem to get it to work.  I've tried the following:

  1. 1: $(map).trigger('resize');
  2. 2: $(window.map).trigger('resize');
  3. as well as
  4. 3: $(window).trigger('resize');

Thing is, I'm not sure about my syntax here and the correct way to call a function in another script from within jQuery.  I've checked that the 'map' variable is global, as typing 'map.resize()' into my browser's dev tools console works. I just can't seem to get jQuery to pass the command.  

Also strange that the '$(window).trigger('resize')' didn't work, as manually resizing the browser window automatically triggers the 'map.resize()' function too.