comment gérer la carte google à l'intérieur d'un div caché (image mise à jour)

J'ai une page et une carte google est dans un div caché au début. J'affiche ensuite le div après avoir cliqué sur un lien, mais seul le coin supérieur gauche de la carte apparaît.

j'ai essayé de faire exécuter ce code après le clic:

    map0.onResize();

ou:

  google.maps.event.trigger(map0, 'resize')

des idées. voici une image de ce que je vois après avoir montré le div avec la carte cachée.

Je viens de le tester moi-même et voici comment je l'ai abordé. Assez simple, faites-moi savoir si vous avez besoin de clarification

HTML

<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>

CSS

<style type="text/css">
#map_canvas {display:none;}
</style>

Javascript

<script>
function displayMap()
{
    document.getElementById( 'map_canvas' ).style.display = "block";
    initialize();
}
function initialize()
{
    // create the map
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng( 0.0, 0.0 ),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>

J'avais le même problème et j'ai découvert que lorsque vous montrez le div, appelez google.maps.event.trigger(map, 'resize');et cela semble résoudre le problème pour moi.

google.maps.event.trigger($("#div_ID")[0], 'resize');

Si vous n'avez pas de divtable de variables disponible, ce devrait être le premier élément (à moins que vous n'ayez fait quelque chose de stupide) dans le contenant GMAP.

J'avais une carte Google dans un onglet Bootstrap, qui ne s'affichait pas correctement. C'était ma solution.

// Previously stored my map object(s) in googleMaps array

$('a[href="#profileTab"]').on('shown', function() {   // When tab is displayed...
    var map = googleMaps[0],
        center = map.getCenter();
    google.maps.event.trigger(map, 'resize');         // fixes map display
    map.setCenter(center);                            // centers map correctly
});

Comment actualiser la carte lorsque vous redimensionnez votre div

Il ne suffit pas d'appeler google.maps.event.trigger(map, 'resize');Vous devez également réinitialiser le centre de la carte.

var map;

var initialize= function (){
    ...
}

var resize = function () {
    if (typeof(map) == "undefined") {) {
        // initialize the map. You only need this if you may not have initialized your map when resize() is called.
        initialize();
    } else {
        // okay, we've got a map and we need to resize it
        var center = map.getCenter();
        google.maps.event.trigger(map, 'resize');
        map.setCenter(center);
    }
}

Comment écouter l'événement de redimensionnement

Angulaire (ng-show ou ui-bootstrap collapse)

Liez directement à la visibilité de l'élément plutôt qu'à la valeur liée à ng-show, car $ watch peut se déclencher avant que le ng-show ne soit mis à jour (ainsi le div sera toujours invisible).

scope.$watch(function () { return element.is(':visible'); },
    function () {
        resize();
    }
);

jQuery .show ()

Utilisez le rappel intégré

$("#myMapDiv").show(speed, function() { resize(); });

Bootstrap 3 Modal

$('#myModal').on('shown.bs.modal', function() {
    resize();
})

Si vous avez inséré une carte Google Map en copiant / collant le code iframe et que vous ne souhaitez pas utiliser l'API Google Maps , c'est une solution simple. Exécutez simplement la ligne javascript suivante lorsque vous affichez la carte masquée. Il prend juste le code HTML iframe et l'insère au même endroit, donc il restitue:

document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;

Version jQuery:

$('#map-wrapper').html( $('#map-wrapper').html() );

Le HTML:

....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....

L'exemple suivant fonctionne pour une carte initialement masquée dans un onglet Bootstrap 3:

<script>
$(document).ready( function() {

    /* Detects when the tab is selected */
    $('a[href="#tab-id"]').on('shown.bs.tab', function() {

        /* When the tab is shown the content of the wrapper
           is regenerated and reloaded */

        $('#map-wrapper').html( $('#map-wrapper').html() ); 

    });
});
</script>

Il est également possible de simplement déclencher l'événement de redimensionnement de la fenêtre native.

Google Maps se rechargera automatiquement:

window.dispatchEvent(new Event('resize'));

J'ai eu le même problème, le google.maps.event.trigger(map, 'resize')ne fonctionnait pas pour moi.

Ce que j'ai fait, c'est de mettre un minuteur pour mettre à jour la carte après avoir mis le div...

//CODE WORKING

var refreshIntervalId;

function showMap() {
    document.getElementById('divMap').style.display = '';
    refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}

function updateMapTimer() {
    clearInterval(refreshIntervalId);
    var map = new google.maps.Map(....
    ....
}

Je ne sais pas si c'est la façon la plus pratique de le faire mais ça marche!

Avec jQuery, vous pouvez faire quelque chose comme ça. Cela m'a aidé à charger une carte Google dans le CMS Umbraco sur un onglet qui ne serait pas visible tout de suite.

function waitForVisibleMapElement() {
    setTimeout(function () {
        if ($('#map_canvas').is(":visible")) {
            // Initialize your Google Map here
        } else {
            waitForVisibleMapElement();
        };
    }, 100);
};

waitForVisibleMapElement();

Ma solution est très simple et efficace:

HTML

<div class="map-wrap"> 
  <div id="map-canvas"></div>
</div>

CSS

.map-wrap{
  height:0;
  width:0;
  overflow:hidden;
}

Jquery

$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map

Ou si vous utilisez gmaps.js , appelez:

map.refresh();

lorsque votre div est affiché.

Je suppose que la question originale concerne une carte qui est activée dans un div caché de la page. J'ai résolu un problème similaire en redimensionnant la carte dans le div caché lorsque le document est prêt, après son initialisation, quel que soit son état d'affichage. Dans mon cas, j'ai 2 cartes, une est affichée et une est cachée lorsqu'elles sont initialisées et je ne veux pas initialiser une carte à chaque fois qu'elle est affichée. C'est un ancien post, mais j'espère qu'il aidera tous ceux qui le recherchent.

J'ai trouvé que cela fonctionnait pour moi:

cacher:

$('.mapWrapper')
.css({
  visibility: 'hidden',
  height: 0
});

montrer:

    $('.mapWrapper').css({
      visibility: 'visible',
      height: 'auto'
    });

S'il est utilisé dans les onglets Bootstrap v3, les éléments suivants devraient fonctionner:

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

où tab-locationest l'ID de l'onglet contenant la carte.

Tout comme John Doppelmann et HoffZ l'ont indiqué, rassemblez tout le code comme suit dans votre fonction d'affichage div ou événement onclick:

setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});

Cela a parfaitement fonctionné pour moi

Ma solution était:

CSS:

.map {
   height: 400px;
   border: #ccc solid 1px;
}

jQuery:

$('.map').width(555); // width of map canvas

Je n'aimais pas que la carte se charge uniquement après que le div caché soit devenu visible. Dans un carrousel, par exemple, cela ne fonctionne pas vraiment.

Ma solution consiste à ajouter une classe à l'élément caché pour l'afficher et à le masquer avec une position absolue à la place, puis à rendre la carte et à supprimer la classe après le chargement de la carte.

Testé dans Bootstrap Carousel.

HTML

<div class="item loading"><div id="map-canvas"></div></div>

CSS

.loading { display: block; position: absolute; }

JS

$(document).ready(function(){
    // render map //
    google.maps.event.addListenerOnce(map, 'idle', function(){
        $('.loading').removeClass('loading');
    });
}

utilisez cette ligne de codes lorsque vous souhaitez afficher la carte.

               $("#map_view").show("slow"); // use id of div which you want to show.
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
                    document.body.appendChild(script);

 $("#map_view").show("slow"); // use id of div which you want to show.
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
     document.body.appendChild(script);

Premier poste. Mon div googleMap était dans un div conteneur avec {display: none} jusqu'au clic sur l'onglet. Eu le même problème que OP. Cela a fonctionné pour moi:

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

Collez ce code à l'intérieur et à la fin de votre code là où votre onglet de conteneur div est cliqué et révèle votre div caché. L'important est que votre conteneur div doit être visible avant que initialize puisse être appelé.

J'ai essayé un certain nombre de solutions proposées ici et d'autres pages et elles n'ont pas fonctionné pour moi. Faites-moi savoir si cela fonctionne pour vous. Merci.

Ajoutez ce code avant le div ou passez-le dans un fichier js:

<script>
    $(document).on("pageshow","#div_name",function(){
       initialize();
    });

   function initialize() {
   // create the map

      var myOptions = {
         zoom: 14,
         center: new google.maps.LatLng(0.0, 0.0),
         mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      map = new google.maps.Map(document.getElementById("div_name"), myOptions);
   }


</script>

Cet événement sera déclenché après le chargement du div afin de rafraîchir le contenu de la carte sans avoir à appuyer sur F5

Après avoir montré la carte, je géocoder une adresse puis définir le centre des cartes. Le google.maps.event.trigger(map, 'resize');n'a pas fonctionné pour moi.

J'ai dû utiliser un map.setZoom(14);

Code ci-dessous:

document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': input.value }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                var marker2 = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                map.setZoom(14);
                marker2.addListener('dragend', function (event) {
                    $('#lat').val(event.latLng.lat());
                    $('#lng').val(event.latLng.lng());
                });

            }
        });