Hi Nelson Gidwin,

If you want to show the map in modal here is the way:

The modal container should be:

<style>
	#google-map-el {
		height: 300px;
	}
</style>
<div class="modal fade" id="google-map-modal">
	<div class="modal-dialog">
		<div class="modal-content">
			
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title">Sample Google Map</h4>
			</div>
			
			<div class="modal-body">
				<div id="google-map-el">Loading google map</div>
			</div>
			
		</div>
	</div>
</div>

Then you need a trigger link (I guess you have it):

<a href="#" class="show-map-modal">Show map</a>

Then assign the JS events:

<script>
    jQuery( document ).ready( function( $ ) {
        
        $( '.show-map-modal' ).on( 'click', function( ev ) {
            ev.preventDefault();
            jQuery( '#google-map-modal' ).modal( 'show' );
            
            setTimeout( function() {
                var map = new google.maps.Map( document.getElementById( 'google-map-el' ), {
                    center : {
                        lat: -34.397, 
                        lng: 150.644
                    },
                    zoom : 8
                } );
                
                var myLatlng = new google.maps.LatLng( -34.397, 150.644 );
                
                var marker = new google.maps.Marker( {
                    position: myLatlng,
                    title:"Hello World!"
                } );
                
                // To add the marker to the map, call setMap();
                marker.setMap( map );
            }, 400 ); // 400ms wait before the animation is end then initialize the map
        } );
    } );
</script>

Here is an example:

https://d.pr/v/HCJ8hV