jQuery Girl
  1. jQuery Girl
  3. Google map ne s’affiche pas correctement
Intereting Posts
Fermeture du sous-menu ouvert – accordéon jQuery Exécuter l’événement jQuery une seule fois après qu’une condition soit remplie Filtrer les résultats à l’aide de jquery ou JS à partir d’un ensemble de valeurs existant Comment désactiver le clic avec jQuery / JavaScript? Suivre les redirections pour la requête HTTP image, côté client Comment attendre que tous les appels envoyés par XHR2 soient terminés événement onclick sur la sortie Ajax jQuery: plugin tablesorter, désactivation du sorting sur certaines colonnes événement de clic qui ne se déclenche pas dans un groupe de boutons radio bootstrap Afficher la fenêtre contextuelle sur l’onglet du navigateur, fermez ou quittez la page Exécuter la fonction jQuery lors du changement de menu déroulant Basculer l’atsortingbut «obligatoire» (d’un champ masqué) lorsqu’une option est sélectionnée avec jQuery Comment faire pour mettre à jour Ajax toutes les 10 secondes dans jQuery? Sélecteur jQuery pour chaque premier élément sur chaque parent Jquery Jstree checkbox capture d’événements

Google map ne s’affiche pas correctement

J’ai un widget Google Map sur Twitter Bootstrap's fenêtre modale de Twitter Bootstrap's .

Lorsque j’ouvre la fenêtre modale, cette carte ne s’affiche que sur une partie d’un widget ( exemple ).

Après avoir redimensionné la fenêtre du navigateur, cette carte s’affiche correctement.

J’ai essayé d’utiliser l’utilisateur $('#map').resize() (sur div avec map) mais cela ne fonctionne pas.

Toute suggestion sur mon problème est appréciée.

J’avais déjà résolu ce problème. Google Map ne s’affiche pas correctement lorsque vous chargez la carte dans un canevas “display: none”. La victoire modale de Bootstrap sera cachée au début. Vous devez donc vous assurer que le fond de carte ne peut pas être masqué avant le chargement de Google Map.

Mon travail consiste à déplacer le canevas vers une position que l’utilisateur ne peut pas voir et à y charger la carte. Après quelques secondes (peut-être 500 ms), déplacez la carte à la bonne position (dans votre cas, le corps modal).

J’écris un exemple simple. Vous pouvez l’essayer:

HTML:

JavaScript: 

 $(function(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), mapOptions); setTimeout(function(){ $('.modal-body').append($("#map").css("margin-top","0px").get(0)); },500); });

Capture d’écran de démonstration:

entrez la description de l'image ici