How to open google map in modal window?

Question

JavaScript

Friends! Can you please explain why the Google map does not work in the modal window?
Rather, it works, and there are no errors, but it is not LOADED until you "kick" it with the cursor.
Why is it so? How to force it to be loaded together with a window?
Here is an example https://codepen.io/Cheizer/pen/jOERLOM



modal window using arctmodal script https://arcticlab.ru/arcticmodal/#examples

Answer 1

In general, if you hide a block with a map according to the principle of display none block. It is enough to execute the resize event for the map.
Or push it into a separate function and call it when necessary, or on an on click event

function showMap(){
google.maps.event.trigger(map, 'resize');
}
//или
$('#btn').on('click', function() {
    showMap();
google.maps.event.trigger(map, 'resize');  //или сразу
  });

But I have another problem, it won't work in modal windows, because there was no map in the tree when loading, and you need to initialize the map in the window. Here you need to look at the docks of your popup window and hang up a call to the initialize () function on the callback function; or on events event. But you need to call initialize(); example

$('.get-direction').on('click',function() {
    // if map is null (the first time), initiate Google maps;
    if (! map) {
      initialize();
    }
    searchAddress( $(this).html() );
    showMap();
  });
  $('.close-map').click(function() {
    hideMap();
  });