Changing order of element addition did not make a difference.
I found this thread: google-maps-does-not-load-in-a-bootstrap-modal, where the author posted the following code to resolve the issue:
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
I’m not a jQuery guy. Working on figuring out where to paste this; advice requested!
