web-dev-qa-db-fra.com

L'API Google Maps V3 ne s'affiche pas de manière compétitive sur la page à onglets à l'aide de Twitter Bootstrap

J'utilise Twitter Bootstrap pour définir mon CSS. J'ai créé une page avec trois onglets. Le deuxième onglet contient une carte construite avec Google Maps. Cependant, lors de l'ouverture de la page et du passage à la seconde page avec la carte, la carte n'est pas rendue complètement. Une fois que j'ai rechargé la page avec l'onglet google maps comme l'onglet sélectionné, la carte se charge entièrement.

J'ai lu certains articles qui conseillaient aux personnes ayant le même problème d'ajouter le code suivant au javascript:

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(homeLatlng);
});

Mais cela ne semble pas être la solution. Veuillez trouver le code complet ci-dessous:

Javascript:

<script type="text/javascript">
function initialize() {
    google.maps.event.addDomListener(window, 'resize', function() {
        map.setCenter(homeLatlng);
    });

    var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
    var myOptions = {
        zoom: 13,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    downloadUrl("data.xml", function(data) {
        var markers = data.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), 
                                parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
        }
    });
}
</script>

HTML:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
      <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
</div>

Comment puis-je résoudre ça? Peut-être que je peux ajouter du javascript qui recharge la partie google maps une fois l'onglet sélectionné mais je ne sais pas comment faire ...

Le code mis à jour affiche toujours l'erreur:

<div class="tab-pane" id="orange" style="background-color:#E3F2FF;">
    <div id="map_canvas" style="width:780px; height:400px; overflow:;"></div>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="util.js"></script>
    <script type="text/javascript">
      function initialize() {
        google.maps.event.addDomListener(window, 'resize', function() {
            map.setCenter(homeLatlng);
        });

        var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
        var myOptions = {
          zoom: 13,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        downloadUrl("data.xml", function(data) {
          var markers = data.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({position: latlng, map: map});
           }
        });
        map.checkResize();
    }
    </script>
</div>
javascriptjquerygoogle-mapstwitter-bootstrap
31
TrendyT

Je me battais aussi avec ce problème. J'utilisais un formulaire modal et il rendait la carte lorsqu'elle était cachée. Lorsque l'onglet est affiché, vous devez déclencher ce code:

google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );

J'espère que cela fonctionnera pour vous. Si cela ne fonctionne pas, voici le lien où j'ai trouvé la solution. Il y aura peut-être un autre commentaire utile.

http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

47
Theo

Il y a beaucoup de solutions ici et franchement, elles sont toutes fausses. Si vous devez supprimer la fonctionnalité par défaut des onglets Bootstrap, vous pouvez tout aussi bien ne pas utiliser les onglets Bootstrap. Si vous appelez uniquement resize après le est affiché, vous pouvez toujours avoir des problèmes avec l'interface de GMaps (niveau de zoom et autres). Il vous suffit d'initialiser la carte une fois l'onglet visible.

var myCenter=new google.maps.LatLng(53, -1.33);
var marker=new google.maps.Marker({
    position:myCenter
});

function initialize() {
  var mapProp = {
      center:myCenter,
      zoom: 14,
      draggable: false,
      scrollwheel: false,
      mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
  marker.setMap(map);

  google.maps.event.addListener(marker, 'click', function() {

    infowindow.setContent(contentString);
    infowindow.open(map, marker);

  }); 
};

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

Vous pouvez voir un exemple de travail dans ce bootply: http://www.bootply.com/102241

Remarque: si votre interface est toujours glitch, cela pourrait être le problème suivant: Google Maps API V3: bizarres problèmes d'affichage de l'interface utilisateur (avec capture d'écran)

En utilisant l'API gmaps la plus récente, il vous suffit d'ajouter ceci à votre style:

.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
8
Archonic

Fonctionne pour moi après avoir testé différents délais:

    $(window).resize(function() {
        setTimeout(function() {
              google.maps.event.trigger(map, 'resize');
           }, 300)            

});

J'espère que cela aide.

6
Cyril Jacquart

J'ai résolu le problème en utilisant

google.maps.event.trigger(map, 'resize');

à l'intérieur de la fonction show dans bootstrap-tab.js signifie qu'au moment d'afficher la boîte, vous devez déclencher l'événement de redimensionnement et fonctionnera ..

Edit: J'ai vu un autre lien avec la même réponse Google Maps API v3, jQuery UI Tabs, map not resizing J'ai vu ce lien après avoir résolu le problème pour découvrir la raison qui est toujours sans réponse pourquoi le redimensionnement de l'événement ne fonctionne pas sur l'événement click des onglets mais fonctionne dans l'onglet js

4
anku_radhey

cela fonctionne bien pour moi, j'utilise des onglets jquery

            setTimeout(function() {
            google.maps.event.trigger(map, "resize");
            map.setCenter(new google.maps.LatLng(default_lat, default_lng));
            map.setZoom(default_map_zoom);
        }, 2000);

à partir de ce lien https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

2
Karim Samir

Pour afficher une carte google maps dans un div masqué, le div doit s'afficher avant que la carte soit créée et chargée. Voici un exemple:

<div  id="map_canvas" style="width:500px; height:500px"></div>

<script>
$(document).ready(function(){
  $('#button').click(function() {
    $('#map_canvas').delay('700').fadeIn();
    setTimeout(loadScript,1000);
  }); 
});

    function initialize() {
        var title= "Title";
        var lat = 50;
        var lng = 50;
        var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({
            position: myLatlng,
            title:artTitle
        });
        // To add the marker to the map, call setMap();
        marker.setMap(map);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }       
</script>
1
Memonic