Cómo lidiar con el mapa de Google dentro de un div oculto (Imagen actualizada)

Tengo una página y un mapa de Google está dentro de un div oculto al principio. Luego muestro el div después de hacer clic en un enlace, pero solo aparece la parte superior izquierda del mapa.

Traté de ejecutar este código después del clic:

    map0.onResize();

o:

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

algunas ideas. Aquí hay una imagen de lo que veo después de mostrar el div con el mapa oculto.

Solo lo probé yo mismo y así es como lo enfoqué. Bastante sencillo, avíseme si necesita alguna aclaración

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>

Estaba teniendo el mismo problema y descubrí que cuando mostraba el div, llamaba google.maps.event.trigger(map, 'resize'); y parece resolver el problema por mí.

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

Si no tiene un mapa variable disponible, debería ser el primer elemento (a menos que haya hecho algo estúpido) en el divque contiene GMAP.

Tenía un mapa de Google dentro de una pestaña Bootstrap, que no se mostraba correctamente. Esta fue mi solución.

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

Cómo actualizar el mapa cuando cambias el tamaño de tu div

No basta con llamar. google.maps.event.trigger(map, 'resize');También debe restablecer el centro del mapa.

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

Cómo escuchar el evento de cambio de tamaño

Angular (colapso ng-show o ui-bootstrap)

Vincula directamente a la visibilidad del elemento en lugar de al valor vinculado a ng-show, porque $ watch puede dispararse antes de que se actualice ng-show (por lo que el div seguirá siendo invisible).

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

jQuery .show ()

Use la devolución de llamada incorporada

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

Bootstrap 3 Modal

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

Si tiene un Google Map insertado copiando / pegando el código del iframe y no desea utilizar la API de Google Maps , esta es una solución fácil. Simplemente ejecute la siguiente línea de JavaScript cuando muestre el mapa oculto. Simplemente toma el código HTML del iframe y lo inserta en el mismo lugar, por lo que se vuelve a mostrar:

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

Versión de jQuery:

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

El HTML:

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

El siguiente ejemplo funciona para un mapa inicialmente oculto en una pestaña 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>

También es posible activar el evento de cambio de tamaño de la ventana nativa.

Google Maps se recargará automáticamente:

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

Tuve el mismo problema, el google.maps.event.trigger(map, 'resize') no funcionaba para mí.

Lo que hice fue poner un temporizador para actualizar el mapa después de poner visible el 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(....
    ....
}

No sé si es la forma más conveniente de hacerlo, ¡pero funciona!

Con jQuery podrías hacer algo como esto. Esto me ayudó a cargar un mapa de Google en Umbraco CMS en una pestaña que no sería visible de inmediato.

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

waitForVisibleMapElement();

Mi solución es muy simple y eficiente:

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 si usa gmaps.js , llame al:

map.refresh();

cuando se muestra tu div.

Supongo que la pregunta original es con un mapa que se inicializa en un div oculto de la página. Resolví un problema similar cambiando el tamaño del mapa en el div oculto cuando el documento está listo, después de que se inicializa, independientemente de su estado de visualización. En mi caso, tengo 2 mapas, uno se muestra y otro está oculto cuando se inicializan y no quiero iniciar un mapa cada vez que se muestra. Es una publicación antigua, pero espero que ayude a cualquiera que esté buscando.

He encontrado que esto funciona para mí:

esconder:

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

mostrar:

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

Si se usa dentro de las pestañas Bootstrap v3, lo siguiente debería funcionar:

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

donde tab-locationestá la ID de la pestaña que contiene el mapa.

Tal como lo han indicado John Doppelmann y HoffZ, junte todo el código de la siguiente manera en su función de visualización div o evento onclick:

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

Funcionó perfectamente para mí

Mi solución fue:

CSS:

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

jQuery:

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

No me gustó que el mapa se cargara solo después de que el div oculto se hiciera visible. En un carrusel, por ejemplo, eso realmente no funciona.

Esta es mi solución: agregar clase al elemento oculto para mostrarlo y ocultarlo con la posición absoluta, luego renderizar el mapa y eliminar la clase después de la carga del mapa.

Probado en Bootstrap Carrousel.

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

use esta línea de códigos cuando quiera mostrar el mapa.

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

Primer comentario. Mi googleMap div estaba dentro de un contenedor div con {display: none} hasta que se hizo clic en la pestaña. Tenía el mismo problema que OP. Esto funcionó para mí:

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

Pegue este código dentro y al final de su código donde se hace clic en la pestaña div del contenedor y revela su div oculto. Lo importante es que su contenedor div debe ser visible antes de que se pueda llamar a initialize.

Probé una serie de soluciones propuestas aquí y otras páginas y no funcionaron para mí. Hazme saber si esto funciona para ti. Gracias.

Agregue este código antes del div o páselo a un archivo 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>

Este evento se activará después de que se cargue el div, por lo que actualizará el contenido del mapa sin tener que presionar F5

Al mostrar el mapa, estoy geocodificando una dirección y luego configurando el centro de mapas. losgoogle.maps.event.trigger(map, 'resize'); no funcionó para mí.

Tuve que usar un map.setZoom(14);

Código a continuación:

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

            }
        });