web-dev-qa-db-fra.com

google Map Show après le redimensionnement de l'écran?

J'ai des problèmes avec la carte Google que je suis en train d'incorporer, je ne comprends pas pourquoi la carte n'apparaît pas et n'apparaît que lorsque je redimensionne la fenêtre, je suis passé par différentes solutions de stackoverflow mais elles 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 charge l’application, il apparaît comme enter image description here

et après avoir re-dimensionné la fenêtre du navigateur, il se présente parfaitement ainsi enter image description here

veuillez me dire comment résoudre ce problème?

javascriptjqueryhtmlcssgoogle-maps
13
Ahmad

appelez google.maps.event.trigger (map, 'redimensionner') lorsque votre "div id = map" sera visible . Veuillez consulter Comment redimensionner une carte Google avec JavaScript après son chargement?

9
Dmitriy

Rien n'a fonctionné pour moi. J'utilisais la boîte de modèle dans Bootstrap pour charger la carte. J'ai tout essayé pendant des heures. À chaque fois que je chargeais la carte, je voyais une boîte grise, mais dès que je redimensionnais le navigateur, la carte était affichée. Semblait devoir redimensionner la fenêtre. J'ai donc mis toutes les fonctionnalités de la carte dans une fonction appelée initmap2() et affiché la nouvelle carte à l'intérieur. et en cliquant je l'ai utilisé

setTimeout( initMap2, 200 );

Ainsi, dès que la boîte de dialogue Modal s'ouvrirait, la carte s'afficherait. J'ai essayé de travailler avec 100 milliseconds mais je suppose que cela fonctionne avec 200+ milliseconds et j'ai donc gardé 500ms juste pour être sûr.

J'espère que ça aide

4
Imran Ud Din

J'ai trouvé cela fonctionne seulement après combiner deux choses: setTimeout et Google redimensionner.

Ainsi, à la fin de initMap, j'ai défini:

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

Et créez un setTimeout pour initMap comme ceci:

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

-- Modifier

Pour répondre à @LucaC .: mon initMap est un js distinct, que je lie aux pages. La solution ci-dessus est définie dans ce js (le setTimeout uniquement).

Mais au bout d’un moment, j’ai remarqué que ce problème se posait toujours avec les appareils mobiles.

Contournement: conservez setTimeout pour initMap et sur la page je charge la carte, j'ai configuré

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

Donc: i) retarder tout ce qui brise la carte; ii) à la fin de tout redimensionner la carte après le chargement de la page :)

2
PJ.Wanderson