Cómo cargar un mapa de Google dentro de un elemento oculto

7 minutos de lectura

avatar de usuario de leora
leora

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.

Intenté 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.texto alternativo

  • @Matt Ball: hice que esto funcionara. después de crear el objeto del mapa de Google, lo almaceno en una variable global para poder volver a consultarlo más tarde y llamar al cambio de tamaño ahora parece funcionar. Estoy tratando de no tener que recrear el objeto del mapa cada vez que lo muestro porque permito que las personas cambien de un lado a otro.

    – leora

    1 de noviembre de 2010 a las 11:54


  • @ooo eso es muy simple con el siguiente código. Todo lo que necesita agregar es una condición if para verificar si el objeto del mapa se ha inicializado o no. Este fue un código improvisado escrito para abordar su problema inicial, que es cargar el mapa correctamente.

    – Filar

    1 de noviembre de 2010 a las 13:35

  • @philar – sí. . gracias aquí . por lo tanto el voto a favor :). De cualquier manera, necesito almacenar las variables a nivel global para evitar reiniciar

    – leora

    1 de noviembre de 2010 a las 14:08


  • En el código a continuación, el objeto del mapa es implícitamente una variable global ya que no se ha declarado dentro de la función “inicializar”.

    – Filar

    2 de noviembre de 2010 a las 7:27


Avatar de usuario de Eric
eric

Estaba teniendo el mismo problema y descubrí que cuando se muestra el div, se llama google.maps.event.trigger(map, 'resize'); y parece resolver el problema para mí.

  • Para mantener el centro original del mapa justo después de cambiar el tamaño, considere extender la declaración de cambio de tamaño de esta manera: var center = map.getCenter(); google.maps.event.trigger(mapa, ‘redimensionar’); mapa.setCenter(centro);

    – John Doppelman

    22 de febrero de 2013 a las 16:13


  • No estoy seguro de por qué, pero necesito envolver la solución dentro de un pequeño setTimeout para que funcione: setTimeout(function() {google.maps.event.trigger(map, ‘resize’)}, 100);

    – HoffZ

    27/02/2014 a las 13:00


  • @JohnDoppelmann ¡Gracias por el consejo! No era intuitivo por qué no estaba manteniendo el centro, ni cómo forzarlo a retroceder.

    – Noah Duncan

    2 mayo 2014 a las 23:06

  • Establezca el centro del mapa y el nivel de zoom nuevamente después de activar el evento ‘cambiar tamaño’. Para obtener más información, consulte: code.google.com/p/gmaps-api-issues/issues/detail?id=1448

    – ruhong

    5 abr 2015 a las 10:10

  • @HoffZ, esto probablemente se deba a que su código de cambio de tamaño se activa antes del efecto de visualización, el tiempo de espera lo retrasa hasta que se realiza el espectáculo, luego el cambio de tamaño puede hacer que funcione. Probablemente pueda lograr el mismo efecto cambiando el orden de ejecución de su código para asegurarse de que al activar el evento, la visualización de div se ejecute antes de cambiar el tamaño del mapa.

    – Bardo

    16 de septiembre de 2015 a las 8:31


Avatar de usuario de Philar
filar

Acabo de probarlo yo mismo y así es como lo abordé. 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>

  • Entonces, ¿básicamente solo instancias el mapa cuando se muestra el div? ¿Hay alguna forma de hacer esto para que el objeto del mapa solo se instancia una vez (en la carga de la página)?

    – Lucas

    14 de febrero de 2017 a las 12:13

  • También podría sugerir un retraso de setTimeout para llamar a la segunda función si está llamando a show() para permitir que el tiempo cambie de tamaño.

    – Eric.18

    15/03/2017 a las 17:50

Avatar de usuario de CSN
CSN

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

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

  • ¿Estás seguro de que puedes activar el elemento en un división en lugar de un google.map.Mapa ¿objeto?

    – Salmán A.

    15 de abril de 2014 a las 12:18

  • @SalmanA: acabo de verificar esto y funcionó para mí (aunque el Mapa parece tener un nuevo Centro). Por investigaciones anteriores, tampoco sabía que esto era posible, así que felicitaciones a CSN

    – Hal

    29 de octubre de 2014 a las 2:45

  • CS N… Esto funciona para mí, pero deja la posición central en el lugar equivocado. Mi mapa se está inicializando como la captura de pantalla del OP, y es como el centro: está centrado en la esquina superior izquierda de mi map_canvas. ¿Pensamientos sobre cómo hacer que se dibuje centrado?

    –Kirk Ross

    5 de noviembre de 2014 a las 23:46

Tenía un mapa de Google dentro de una pestaña de 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 (ng-show o ui-bootstrap colapso)

Enlace directamente a la visibilidad del elemento en lugar de al valor vinculado a ng-show, porque $watch puede activarse 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 .mostrar()

Utilice la devolución de llamada integrada

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

Bootstrap 3 modal

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

  • su método de cambio de tamaño modal Bootstrap 3 solucionó mi problema perfectamente, mientras que la mayoría de las otras sugerencias no lo hicieron. ¡Gracias!

    – BrianLegg

    10 dic 2016 a las 20:21

Avatar de usuario de Philip
Felipe

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

Google Maps se recargará automáticamente:

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

  • su método de cambio de tamaño modal Bootstrap 3 solucionó mi problema perfectamente, mientras que la mayoría de las otras sugerencias no lo hicieron. ¡Gracias!

    – BrianLegg

    10 dic 2016 a las 20:21

Si tiene un mapa de Google insertado copiando y pegando el código 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 muestra de nuevo:

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 de 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>

  • La mejor solución para cualquiera que no esté cargando Google Map JS sino simplemente usando iframe con url src https://www.google.com/maps/embed/v1/place?..

    – gsinha

    8 de abril de 2015 a las 3:35

¿Ha sido útil esta solución?