Lo que estoy intentando hacer es mostrar un mapa a manera de popup cuando se presiona un botón, pero cuando hago click en el botón, se muestra la ventana pero sin el mapa, como se muestra aquí en el código, estoy usando bootstrap:
<div class="col-md-8">
<form action="#" method="get" class="advance-search-query input-night-rider yellow-theme">
<div class="regular-search">
<div class="row justify-content-center align-items-center">
<div class="col-md-4">
<label>Destino</label>
<div class="input">
<i class="fa fa-map-marker"></i>
<input type="text" placeholder="Busca el destino" class="pick-location form-controller" readonly="">
<div class="text-center">
<button type="submit" class="button" data-toggle="modal" data-target="#seleecionarDestino">Seleccionar Destino</button>
<div class="modal fade" id="seleecionarDestino">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Selecciona el Destino</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-dialog modal-xl">
<div id="map">
<script>
function initMap() {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
var marker = new google.maps.Marker({position: uluru, map: map});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqgmGIZhVwa44pOBhPM_FyjbD2l2CbMEU&callback=initMap">
</script>
</div>
</div>