google map show après le redimensionnement de l'écran?

Je vais avoir des problèmes avec la carte de google, je suis d'incorporation, je ne comprends pas pourquoi sur charger la carte apparaît pas et n'apparaissent que lorsque j'ai redimensionner la fenêtre, je suis passé par différentes solutions stackoverflow mais ils ne fonctionnent pas pour moi.

Voici mon code js:

<script>
function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 31.554606, lng: 74.357158},
          zoom: 14
        });
 google.maps.event.addListenerOnce(map, 'idle', function() {
               google.maps.event.trigger(map, 'resize');
            });
         } 
</script>

mon div

<div id="map"></div>

quand je le chargement de l'application, il apparaît comme
google map show après le redimensionnement de l'écran?

et après re taille de la fenêtre du navigateur, il apparaît parfaitement comme ça
google map show après le redimensionnement de l'écran?

de bien vouloir me dire comment résoudre ce problème ?

source d'informationauteur Ahmad

  1. 9

    appel google.cartes.de l'événement.déclencheur(carte, 'redimensionner') lorsque votre "div id=carte" sera visible.
    Veuillez voir Comment redimensionner une Carte Google map avec JavaScript après qu'il a chargé?

  2. 4

    L'eventlistener est définie pour redimensionner, il doit être mis à onload.

  3. 4

    Rien n'a fonctionné pour moi. J'ai été en utilisant le Modèle de la boîte dans le Bootstrap pour charger la carte. J'ai tout essayé pendant des heures. Chaque fois que je charge la carte, je voyais une zone grise, mais dès que je voudrais redimensionner le navigateur, ce serait l'affichage de la carte. Il semblait nécessaire de redimensionnement de la fenêtre. Alors, j'ai mis toute la carte de la fonctionnalité dans une fonction appelée initmap2() et affiche la carte frais à l'intérieur. et en cliquant sur j'ai utilisé

    setTimeout( initMap2, 200 );

    Donc dès que le Modal zone ouvrir, afficher la carte, et j'ai essayé de travail sera 100 milliseconds mais je suppose que cela fonctionne avec 200+ milliseconds j'ai donc gardé le 500ms juste pour être sûr.

    J'espère que cette aide

  4. 2

    J'ai trouvé ce travail qu'après combiner deux choses: setTimeout et google redimensionner.

    Ainsi, à la fin de initMap, j'ai mis:

    google.maps.event.addListener(map, "idle", function(){
  google.maps.event.trigger(map, 'resize'); 
});

    Et de créer un setTimeout pour la initMap comme ceci:

    $(document).ready(function(){
  setTimeout(initMap, 1000);
});

    --
    Edit

    Pour répondre à @LucaC.: mon initMap est séparé js, que j'ai le lien dans les pages. La solution ci-dessus est définie dans le présent js (le setTimeout seulement).

    Mais, après un certain temps, j'ai remarqué ce problème se produit encore avec des appareils mobiles.

    De travail autour de: garder le setTimeout pour la initMap et sur la page que je charge la carte, j'ai mis en place

    $(window).load(function(){
 setTimeout(function(){
   google.maps.event.trigger(map, "resize");
 }, 250);
});

    Afin: i) de retard rien que la rupture de la carte; ii) à la fin de tout, redimensionner la carte après le chargement de la page 🙂