web-dev-qa-db-fra.com

Google Map ne se charge pas correctement dans Bootstrap tab

J'utilise iProperty pour créer des onglets avec du contenu pour différents propriétaires.

J'ai beaucoup piraté les fichiers de base pour que le site se présente et fonctionne comme je le veux, mais les cartes dans les onglets me posent un problème.

Si vous consultez la page ci-dessous, puis que vous cliquez sur l'onglet Emplacement, vous verrez le problème suivant: il ne charge qu'une petite partie de la carte. Incidemment, le problème disparaît si vous redimensionnez le navigateur lorsque l'onglet Carte est actif. Je pense donc qu'il y a un problème lors du chargement initial de la carte.

http://red-ferndevelopment.co.uk/OfficeExperts/index.php?option=com_iproperty&view=property&id=90&Itemid=318

Si quelqu'un pouvait aider, je serais plus que reconnaissant.

Merci beaucoup, Austin

developmentjquery
2
Austin

Tout d’abord, c’est parce que la carte vérifie que tout est "correct" lors du redimensionnement du navigateur. Étant donné que l'onglet est masqué par défaut, la taille de la carte est réduite jusqu'à son ouverture, mais aucun événement n'est envoyé à la carte pour notifier le changement. J'ai déjà vu des problèmes similaires avec Google Maps et ce n'est pas vraiment un problème, mais un problème que l'on peut facilement rater.

Il y a deux solutions à cela, la première consiste à appeler map.checkResize() lorsque l'onglet est ouvert. Bien que ce soit un composant tiers qui peut ne pas être facile, mais si des modifications de base ont déjà été apportées, cela ne posera peut-être pas problème. Remplacez map par la variable réelle de la carte.

La deuxième façon, plus facile de "tromper" sans la toucher est de faire quelque chose comme ceci:

jQuery('a[href="#propmap"]').on('click',function(){
   jQuery(window).trigger('resize');
});

Vous pouvez le placer n'importe où (tant que c'est après que le DOM a été chargé, bien sûr) et il devrait être corrigé. Il déclenche automatiquement un événement de redimensionnement lorsque l'utilisateur clique sur l'onglet. Il doit donc forcer la carte à fonctionner sans redimensionnement manuel.

La première suggestion est la meilleure car ce n’est pas un type de "bidouille", mais la seconde devrait fonctionner à tout prix.

5
Jordan Ramstad

Les onglets Bootstrap (et les carrousels et les modaux) sont initialement configurés pour n'en afficher aucun jusqu'à ce qu'ils deviennent actifs. L'élément parent de votre carte a donc la hauteur/largeur de 0.

Le meilleur moyen de résoudre ce problème consiste à appeler votre script de carte après l'onglet a été affiché et non sur le document prêt. Sur le document prêt, il n'y a rien dans lequel charger votre carte pour le navigateur.

Bootstrap fournit une méthode pour ce faire avec l'événement shown.bs.tab http://getbootstrap.com/javascript/#tabs

Donc, vous avez simplement besoin de quelque chose comme ceci qui instancie la carte après la fin de l'affichage de l'onglet:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // Your Google map code here
});
2
Seth Warburton

Seth Warburton a écrit: Bootstrap les onglets (et les carrousels et modaux) sont initialement configurés pour n'en afficher aucun, jusqu'à ce qu'ils deviennent actifs, de sorte que l'élément parent de votre carte a une hauteur/largeur égale à 0.

J'ai eu le même problème avec Bootstrap3 que vous. enfin, j'ai fini avec la solution simple CSS.

.tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}
1
ND_

Vous pouvez ajouter cette déclaration css pour éviter les conflits Bootstrap/Google Map (si l'id de votre carte est #map). Dans certains cas, cela résout le problème:

#map img {
    max-width: none;
}

Cependant, vous devrez peut-être charger le script de mappage uniquement lorsque l'onglet est affiché.

$('a[href="#propmap"]').on('shown', function() {
    // When tab is displayed... will run google map code
    // Your Google map code here
}

J'espère que cela peut aider!

0
Cyril