Afficher une carte Google dans un modal créé avec Twitter Bootstrap

J’essaie d’insérer une carte Google dans un modal en utilisant Twitter Bootstrap. Le modal apparaît avec la forme de la carte présente, mais seule une partie de la carte est affichée, le rest est gris. Lors du redimensionnement de l’écran, la carte s’affiche toujours correctement, bien que centrée au mauvais endroit.

J’ai recherché et trouvé des suggestions telles que l’appel de l’événement de redimensionnement de la carte ou la définition de la largeur maximale de l’image de la carte sur none, mais aucune de ces suggestions n’a été utile jusqu’à présent. Il semble que la carte ne parvienne pas à déterminer sa taille correcte tant qu’elle se trouve dans un élément caché.

JS

function initialize() { var mapOptions = { center: new google.maps.LatLng(51.219987, 4.396237), zoom: 12, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions); var marker = new google.maps.Marker({ position: new google.maps.LatLng(51.219987, 4.396237) }); marker.setMap(map); } 

HTML

  

J’utilise Twitter Bootstrap v2.0.4. J’ai besoin d’aide car je ne parviens pas à déclencher correctement l’événement de redimensionnement ou à modifier le css pour que la carte Google rest seule.

Google Maps affiche en effet une zone “grise” lorsqu’il est placé dans un élément dynamic (par exemple: un élément redimensionné, fondu, etc.). Vous avez raison de déclencher la fonction “redimensionner”, qui devrait être appelée une fois l’animation terminée (l’événement shown.bs.modal dans Bootstrap 3 ou l’ événement shown dans Bootstrap 2):

 $("#myModal").on("shown.bs.modal", function () { google.maps.event.sortinggger(map, "resize"); }); 

Dans Bootstrap 2, vous ferez:

 $('#myModal').on('shown', function () { google.maps.event.sortinggger(map, "resize"); }); 

(où map est le nom de la variable de votre carte (voir la documentation de Google Maps pour plus de détails) et #myModal l’ID de votre élément).

MISE À JOUR 2018-05-22

Avec une nouvelle version de moteur de rendu dans la version 3.32 de l’API JavaScript de Maps, l’événement de redimensionnement ne fait plus partie de la classe Map .

La documentation indique

Lorsque la carte est redimensionnée, le centre de la carte est fixe

  • Le contrôle plein écran conserve maintenant le centre.

  • Il n’est plus nécessaire de déclencher l’événement de redimensionnement manuellement.

source: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.sortinggger(map, "resize"); n’a aucun effet à partir de la version 3.32

Pour moi, ça marche comme ça (Boostrap 3):

 $("#contact-modal").on("shown.bs.modal", function () { google.maps.event.sortinggger(map, "resize"); }); 

Afficher la carte correctement et centrée

Je voulais souligner quelques modifications que j’ai apscopes, basées sur la réponse originale, pour que cela fonctionne avec Bootstrap 3 (vérifier l’ utilisation des modaux ).

 // Resize map to show on a Bootstrap's modal $('#map-modal').on('shown.bs.modal', function() { var currentCenter = map.getCenter(); // Get current center before resizing google.maps.event.sortinggger(map, "resize"); map.setCenter(currentCenter); // Re-set previous center }); 

Dans ce cas, je m’occupe également de recentrer la carte sur la base de cette question suggérée dans le commentaire de Jan-Henk à la première réponse.

Lorsque vous utilisez Bootstrap 3, vous devez utiliser ce qui est fourni dans leur documentation, c’est-à-dire au lieu de «montré», utilisez «montré.bs.modal»

Exemple:

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

La réponse acceptée fonctionne, en effet, dans ce cas où le contenu du div est local. Malheureusement, j’ai rencontré le même problème en affichant une carte incluse dans les données distantes. Obtenir le handle de la carte et l’appel de redimensionnement n’a pas correctement centré ma carte. Voici comment j’ai résolu le problème dans ma situation de données distante.

Inclure une balise de script dans vos données distantes avec une fonction pour initialiser la carte

  

Appelez la fonction dans l’événement affiché du dialog sur la page principale

  

De cette façon, la carte est déjà dimensionnée dans la boîte de dialog avant de l’initialiser. Espérons que cela aidera les autres dans une situation similaire.

La réponse acceptée s’est débarrassée des cases grises, mais ne centre pas la carte aux bonnes coordonnées pour moi. Ma solution était juste d’attendre le rendu de la carte jusqu’à ce que l’affichage du modal soit terminé.

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

le code suivant fonctionne parfaitement pour bootstrap 3

 $("#mapModal").on("shown.bs.modal", function () {initialize();}); 
  this works for me ****  **Button**  **javascript**  

J’espère que cela aidera

J’ai corrigé avec la solution:

 $('#myId').on('shown.bs.modal', function () { initializeMap() // with initializeMap function get map. }); 

// event shown.bs.modal sur le bootstrap modal affichera après le spectacle modal, pas utiliser show.bs.modal car il appellera avant le spectacle modal.

essaye ça !

  

 var map = marker = new Array(); geocoder = NULL; function addPoint(location, id, mapId) { if (!marker[id]) { marker[id] = new google.maps.Marker({ position: location, map: map[mapId], draggable: true }); } } function placeMarker(location, editStr, id) { if (!marker[id]) { marker[id] = new google.maps.Marker({ position: location, map: map[id], draggable: false }); } marker[id].setPosition(location); map[id].setCenter(location); $("#longitud").val(location.lat()); $("#latitud").val(location.lng()); } function initializeMap(id, div_id, lat, lng, editStr) { if (!geocoder) geocoder = new google.maps.Geocoder(); if (!map[id]) { var coordinates = new google.maps.LatLng(lat, lng); var myOptions = {zoom: 8, center: coordinates, mapTypeId: google.maps.MapTypeId.ROADMAP} map[id] = new google.maps.Map(document.getElementById(div_id), myOptions); google.maps.event.addListener(map[id], 'click', function(event) { placeMarker(event.latLng, editStr, id); }); placeMarker(coordinates, editStr, id); } } $('#map_modal').on('shown.bs.modal', function(e) { initializeMap("#newMaps", "map_canvas", 10.444598, -66.9287, ""); }) 

Je suis également confronté au même problème mais je le résous en attendant l’état “inactif” de la carte (c’est-à-dire quand il est terminé) et en appelant ensuite le redimensionnement:

  google.maps.event.addListenerOnce(map, 'idle', function () { var currentCenter = map.getCenter(); google.maps.event.sortinggger(map, 'resize'); map.setCenter(currentCenter); map.setZoom(15); }); 

après

  map = new google.maps.Map(document.getElementById('map-canvas2'),mapOptions);