Comment redimensionner une Carte Google map avec JavaScript après qu'il a chargé?

J'ai un "mapwrap' div mis à 400px x 400px et à l'intérieur que j'ai une Google map' est défini sur 100% x 100%. La carte des charges à 400 x 400px, puis avec JavaScript je redimensionner la "mapwrap' à 100% x 100% de l'écran de la carte google redimensionne la totalité de l'écran comme je l'ai prévu, mais les tuiles commencent à disparaître avant le côté droit de la page.

Est-il une fonction simple, je peux appeler à cause de la carte de Google pour s'adapter à la plus grande taille 'mapwrap' div?

InformationsquelleAutor Matthew James Taylor | 2009-04-13
  1. 28

    Si vous utilisez Google Maps v2, appel checkResize() sur votre carte après redimensionnement du conteneur. lien

    Mise à JOUR

    Google Maps JavaScript API v2 a été dépréciée en 2011. Elle n'est plus disponible.

    InformationsquelleAutor SingleNegationElimination
  2. 321

    pour Google Maps v3, vous devez déclencher l'événement resize différemment:

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

    Consultez la documentation de l'événement resize (vous aurez besoin de recherche pour le mot 'redimensionner'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

    Mise à jour

    Cette réponse a été ici longtemps, donc une petite démo pourrait être utile, & bien qu'il utilise jQuery, il n'y a pas de réel besoin de le faire.

    JS:

    $(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  //listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    //(the 'map' here is the result of the created 'var map = ...' above)
    google.maps.event.trigger(map, "resize");
  });
});

    CSS:

    html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

    Mise à JOUR 2018-05-22

    Avec un nouveau moteur de rendu de presse dans la version 3.32 des Maps JavaScript API de l'événement resize n'est plus une partie de Map classe.

    La documentation états

    Lorsque la carte est redimensionné, le centre de la carte est fixé

    • Le plein écran de contrôle conserve désormais centre de.

    • Il n'est plus besoin de déclencher l'événement resize manuellement.

    source: https://developers.google.com/maps/documentation/javascript/new-renderer

    google.maps.event.trigger(map, "resize"); n'a aucun effet à partir de la version 3.32

    • Pour toute personne utilisant goMap, rappelez-vous que la carte google map l'objet est disponible à $.goMap.carte
    • Voir cette réponse par Andrew Couvertures un moyen à mettre en œuvre:
    • La carte ne serait pas redimensionner après l'appel de ce, jusqu'à ce que j'ai enveloppé avec un setTimeout. J'ai trouvé la solution ici (voir le commentaire n ° 46).
    • Cette réponse doit être choisie en considérant que v2 est maintenant obsolète. @Tyler Collier de cet événement de déclenchement est de notifier à la carte qu'il a à repeindre. Il est possible que vous redimensionnez un conteneur caché, auquel cas, oui, un zoom arrière et à travailler dans un délai d'expiration.
    InformationsquelleAutor cmroanirgo
  3. 8

    La réponse google.maps.event.trigger(map, "resize"); ne fonctionne pas pour moi seul.

    Ici est un truc qui a assuré que la page avait chargé et que la carte avait chargés. Par la fixation d'un écouteur et d'écoute pour l'état inactif de la carte vous pouvez ensuite appeler l'événement déclencheur pour redimensionner.

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

    C'était ma réponse qui a fonctionné pour moi.

    • cette réponse ne fonctionnent pas si la carte est déjà inactif
    InformationsquelleAutor italiansoda
  4. 2

    Wolfgang Pichler est la carte-in-a-box offre à

    Charge une carte dans un déplaçable et redimensionnable élément div.

    • Il ressemble à ce qui est pour v2 cartes. L'affiche originale a une question sur la v3 de google maps. Les deux Api ne semblent pas être compatibles.
    InformationsquelleAutor
  5. 1

    C'est le meilleur, il va faire le Travail fait.
    Il sera de nouveau de la taille de votre Carte.
    Pas besoin d'inspecter l'élément plus à re-de la taille de votre Carte.
    Ce qu'il fait il va automatiquement déclencher la taille de l'événement .

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

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );
    InformationsquelleAutor Divyanshu Rawat
  6. 0

    Tout d'abord, merci de me guider et de clôture de cette question. J'ai trouvé un moyen de corriger ce problème de vos débats. Oui, venons-en à la point de.
    Le truc c'est que je suis en Utilisant GoogleMapHelper v3 aide dans CakePHP3. Quand j'ai essayé d'ouvrir bootstrap modal popup, je me suis heurté avec le gris de la zone de problème sur la carte. Il a été prolongé de 2 jours. Finalement, j'ai obtenu un correctif au cours de cette.

    Nous avons besoin de mettre à Jour le GoogleMapHelper pour résoudre le problème

    Besoin d'ajouter le script ci-dessous dans setCenterMap fonction

    google.maps.event.trigger({$id}, \"resize\");

    Et le besoin de l'inclure ci-dessous de code en JavaScript

    google.maps.event.addListenerOnce({$id}, 'idle', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});
    InformationsquelleAutor user1933951