0

Estoy intentando implementar este mapa de google en un modal pero al mostrar el modal el mapa no carga a no ser que inspecione la pagina. La URL es: http://94.177.214.187/genero1.php El código es el siguiente:`

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title"> Satifaction  | | <strong> The Rolling Stones</strong></h4>
    </div>
    <div class="modal-body">

        <div id="map" style="width:400px;height:400px;background:yellow"></div>


      </div>

  </div>

</div>

function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

texto en negrita Un saludo y Gracias de antemano.

6
  • 1
    Pon la parte del javascript donde muestras el modal y donde llamas a la función myMap
    – NetVicious
    Commented el 7 jun. 2017 a las 12:24
  • Sigue ocurriendo lo mismo.
    – Trackless
    Commented el 7 jun. 2017 a las 12:35
  • 1
    Donde haces el llamado a la funcion que carga el mapa?
    – sioesi
    Commented el 7 jun. 2017 a las 12:37
  • <div id="map" style="width:101%;height:50%;background:yellow"></div>
    – Trackless
    Commented el 7 jun. 2017 a las 12:38
  • he añadido onclick="myMap" pero me parece un poco chapuza y con un onload no carga. Si sabéis alguna otra manera.
    – Trackless
    Commented el 7 jun. 2017 a las 12:42

2 respuestas 2

1

Elimina el onclick del <div id="map"> dejándolo tal que así:

<div id="map" style="width:101%;height:50%;background:yellow"></div>

Debajo de la función myMap pon esto:

$( "div.modal.fade" ).on('shown.bs.modal', function(){
    myMap();
});

Lo he probado bajando tu web en local y funciona ok.

1
  • Gracias todo perfecto.
    – Trackless
    Commented el 8 jun. 2017 a las 6:08
1

Prueba con esto... En vez de #modal pon el ID de tu modal.

 $('#modal').on('shown.bs.modal', function () {
          myMap();
    })

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.