come gestire google map all'interno di un div nascosto (immagine aggiornata)

ho una pagina e una google map è inizialmente all'interno di un div nascosto. Quindi visualizzo il div dopo aver fatto clic su un collegamento, ma viene visualizzato solo l'angolo in alto a sinistra della mappa.

ho provato a far eseguire questo codice dopo il clic:

    map0.onResize();

o:

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

qualche idea. ecco un'immagine di ciò che vedo dopo aver mostrato il div con la mappa nascosta in esso.

L'ho provato da solo ed ecco come l'ho affrontato. Abbastanza diretto, fammi sapere se hai bisogno di chiarimenti

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>

Stavo avendo lo stesso problema e ho scoperto che quando mostra il div, chiama google.maps.event.trigger(map, 'resize');e sembra che risolva il problema per me.

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

Se non hai a disposizione una mappa variabile, dovrebbe essere il primo elemento (a meno che tu non abbia fatto qualcosa di stupido) in quello divche contiene GMAP.

Avevo una mappa di Google all'interno di una scheda Bootstrap, che non veniva visualizzata correttamente. Questa era la mia soluzione.

// 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
});

Come aggiornare la mappa quando ridimensioni il tuo div

Non è sufficiente solo chiamare google.maps.event.trigger(map, 'resize');Dovresti ripristinare anche il centro della mappa.

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);
    }
}

Come ascoltare l'evento di ridimensionamento

Angolare (ng-show o ui-bootstrap collapse)

Associa direttamente alla visibilità dell'elemento piuttosto che al valore associato a ng-show, perché $ watch può attivarsi prima che venga aggiornato ng-show (quindi il div sarà comunque invisibile).

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

jQuery .show ()

Utilizzare il callback integrato

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

Bootstrap 3 modale

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

Se hai inserito una mappa di Google copiando / incollando il codice iframe e non desideri utilizzare l'API di Google Maps , questa è una soluzione semplice. Basta eseguire la seguente riga javascript quando si mostra la mappa nascosta. Prende solo il codice HTML iframe e lo inserisce nello stesso posto, quindi esegue nuovamente il rendering:

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

versione jQuery:

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

HTML:

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

L'esempio seguente funziona per una mappa inizialmente nascosta in una scheda 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>

È anche possibile attivare l'evento di ridimensionamento della finestra nativa.

Google Maps si ricaricherà automaticamente:

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

Ho avuto lo stesso problema, google.maps.event.trigger(map, 'resize')non funzionava per me.

Quello che ho fatto è stato mettere un timer per aggiornare la mappa dopo aver reso visibile il 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(....
    ....
}

Non so se sia il modo più conveniente per farlo ma funziona!

Con jQuery potresti fare qualcosa del genere. Questo mi ha aiutato a caricare una Google Map in Umbraco CMS in una scheda che non sarebbe stata visibile da subito.

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

waitForVisibleMapElement();

La mia soluzione è molto semplice ed efficiente:

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

O se usi gmaps.js , chiama:

map.refresh();

quando viene mostrato il tuo div.

Immagino che la domanda originale sia con una mappa che è initalizzata in un div nascosto della pagina. Ho risolto un problema simile ridimensionando la mappa nel div nascosto al momento del documento pronto, dopo che è stato inizializzato, indipendentemente dal suo stato di visualizzazione. Nel mio caso, ho 2 mappe, una è mostrata e una è nascosta quando sono inizializzate e non voglio inizializzare una mappa ogni volta che viene mostrata. È un vecchio post, ma spero che aiuti chiunque cerchi.

Ho trovato che questo funziona per me:

nascondere:

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

mostrare:

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

Se utilizzato nelle schede Bootstrap v3, dovrebbe funzionare come segue:

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

dove si tab-locationtrova l'ID della scheda contenente la mappa.

Proprio come hanno indicato John Doppelmann e HoffZ, metti insieme tutto il codice proprio come segue nella tua div che mostra la funzione o l'evento onclick:

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

Ha funzionato perfettamente per me

La mia soluzione era:

CSS:

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

jQuery:

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

Non mi piaceva che la mappa si caricasse solo dopo che il div nascosto era diventato visibile. In una giostra, ad esempio, non funziona davvero.

Questa mia soluzione è aggiungere classe all'elemento nascosto per scoprirlo e nasconderlo con la posizione assoluta, quindi eseguire il rendering della mappa e rimuovere la classe dopo il caricamento della mappa.

Testato in 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');
    });
}

usa questa linea di codici quando vuoi mostrare la mappa.

               $("#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);

Primo post. Il mio div googleMap era all'interno di un contenitore div con {display: none} fino a quando non si faceva clic sulla scheda. Ha avuto lo stesso problema di OP. Questo ha funzionato per me:

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

Inserisci questo codice all'interno e alla fine del codice in cui si fa clic sulla scheda div del contenitore e rivela il div nascosto. L'importante è che il div container sia visibile prima di poter chiamare l'inizializzazione.

Ho provato una serie di soluzioni proposte qui e in altre pagine e non hanno funzionato per me. Fammi sapere se questo funziona per te. Grazie.

Aggiungi questo codice prima del div o passalo a un file 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>

Questo evento verrà attivato dopo il caricamento del div, quindi aggiornerà il contenuto della mappa senza dover premere F5

Dopo aver mostrato la mappa, sto geocodificando un indirizzo, quindi impostando il centro mappe. Il google.maps.event.trigger(map, 'resize');non ha funzionato per me.

Ho dovuto usare a map.setZoom(14);

Codice sotto:

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());
                });

            }
        });