web-dev-qa-db-fra.com

Google Map dans l'onglet Bootstrap

J'essaie de faire apparaître une carte Google dans un onglet Vanilla Bootstrap. J'ai construit un violon tiré directement de la documentation Bootstrap, avec le script Gmap à peu près exactement comme le recommande Google. 

Je vide l'objet map dans console.dir et il a été initialisé correctement. Dans les projets précédents, j'avais été capable d'afficher des cartes dans des onglets à l'aide de la fonction resize - mais cela ne semble pas fonctionner avec Bootstrap.

Quelqu'un at-il obtenu ce travail?

Voici le générique jsfiddle-- http://jsfiddle.net/B4zLe/4/

EDIT: ajout de code

JAVASCRIPT:

var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
    });
});

HTML:

<div>
<div class="bs-docs-example">
    <ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Map</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <div id="map_canvas"></div>   
    </div>
</div>
javascriptjquerygoogle-maps-api-3twitter-bootstrap
15
julio

Vous êtes un peu trop optimiste quant à la puissance de l'événement "redimensionner". De la documentation:

  • redimensionner: les développeurs doivent déclencher cet événement sur la carte lorsque la div change de taille: google.maps.event.trigger (map, 'resize') 

En d'autres termes, le redimensionnement ne fera rien de plus sophistiqué que de redimensionner la carte avec la fenêtre, mais seulement de le redimensionner en fonction du conteneur dans lequel il se trouve - dans ce cas, le div "map_canvas". Cependant, cette div n'a pas de dimensions, donc la taille de la carte est nulle.

Puisque vous avez ajouté des écouteurs pour vous assurer que la carte sera modifiée à la taille de son parent, c'est une solution assez simple: il suffit d'ajouter du code pour modifier la div parent à la taille souhaitée et la carte sera redimensionnée en conséquence. Par exemple:

$("#map_canvas").css("width", 400).css("height", 400);

va le dimensionner à 400x400. Voici un exemple , vous devriez pouvoir le changer comme vous le souhaitez. 

9
Bubbles

Réponse mise à jour pour Bootstrap 3: 

$("a[href='#my-tab']").on('shown.bs.tab', function(){
  google.maps.event.trigger(map, 'resize');
});

Notez que vous sélectionnez le lien vers l'onglet, pas l'onglet lui-même. 

30
apb

ne pas utiliser .tab-content > .tab-pane {display: none}
utilisez ceci

.tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}
19
cevatasln

Redimensionner la carte lorsque les onglets sont affichés

http://jsfiddle.net/B4zLe/49/

 $('#myTab a[href="#profile"]').on('shown', function(){
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng);
 });
10
noocom

J'ai aussi le problème avec Google Maps avec Bootstrap 3, mais j'ai résolu le problème avec une petite astuce sur Andy B code:

 var cl=0;
 $("a[href='#maptab']").on('shown.bs.tab', function(){
     cl++;
     if(cl == 1){   // this is to prevent map initialized twice or more
         initialize();
     }
     else{
        //do nothing        
     }
 });

bien .. au moins son travail pour moi :)

2
Myghty Draxx

Solution absolument merveilleuse par cevatasln . Moi aussi j'ai utilisé toutes les solutions jQuery et Javascript possibles, aucune n’a fonctionné! Si vous voulez cibler onglet spécifique et utiliser galerie dynamique ou quelque chose cela fonctionnera pour vous

.tab-content > #tab5.tab-pane {
   display: block;
   height:0;
   max-height:0;
   overflow:hidden;
}

.tab-content > #tab5.active  {
   display: block;
   height:auto;
   max-height: 100%;
}
0
Hercules S.
var map;

jQuery(function($) {
    $(document).ready(function() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        console.dir(map);
        google.maps.event.trigger(map, 'resize');

        $('a[href="#profile"]').on('shown', function(e) {
            google.maps.event.trigger(map, 'resize');
        });
        $("#map_canvas").css("height", 400);
    });
});

Fiddle

0
Swaranan Singha Barman

Des problèmes persistent avec Bootstrap 3.3.7, jquery 1.11.3 et les onglets. Tout fonctionne bien jusqu'à ce que vous essayiez de mettre la carte dans un onglet qui, au chargement, est d'abord masqué. Ensuite, vous obtenez la carte chargée et tout devrait fonctionner, mais vous ne voyez que la zone grise (ou toute autre couleur, pas sûre) de la carte. Vous pouvez tout faire ici, mais vous ne pouvez pas voir la carte elle-même. En faisant glisser à l'intérieur de la carte, vous pourrez peut-être voir certaines choses, mais en général - une carte vierge.

Option 1 - Vous pouvez voir la carte lorsque vous redimensionnez un instant votre fenêtre. Mais il y a aussi une perte - dès que vous changez d'onglet, il disparaît à nouveau.

Option 2 - vous pouvez mettre la carte sur le premier onglet et en finir.

Option 3 - vous pouvez simplement créer un code pour "redimensionner" la carte (comme indiqué précédemment). Mais là j'ai rencontré le problème - cela ne fonctionne pas TOUJOURS. Au moins ça n'a pas marché pour moi:

.on("shown", function(){})
.on("shown.bs.tab", function(){});
.on("show.bs.tab", function(){});
...

Pratiquement aucune variation n'a fonctionné. J'ai réussi à le faire fonctionner sur l'onglet PREMIER clic, en utilisant l'ID du lien, pas de comparaison, mais dès que j'ai cliqué sur un autre onglet, la carte grise à nouveau ... j'étais comme - sérieusement!?

Enfin, j'ai trouvé une solution: sur cet onglet spécifique, cliquez sur (par ID, je recommande), il fait toutes les choses nécessaires. Cela signifie que, chaque fois que vous cliquez quelque part (autres liens ou onglets) et que vous revenez à l'onglet de la carte, la carte sera rechargée (et peut donc être un peu lente - cela dépend d'Internet), mais au moins j'ai une carte qui n'est pas vide. image grise de google maps.

J'espère que cela aidera quelqu'un d'autre à l'avenir.

0
lohe

le problème persiste toujours en 2016, supprimez le gestionnaire Google DOM et appelez la fonction initialize () avec le déclencheur jQuery "show" comme déjà écrit ci-dessus. La carte est ensuite chargée en cliquant sur l'onglet 

google.maps.event.addDomListener (window, 'load', initialize);

jQuery('a[href="#googlemaps-tab-name"]').on('shown.bs.tab', function(e)
{   
    initialize();
});
0
guido _nhcol.com.br_

utiliser le script ci-dessous

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

            init();

        });
0
Shridhar