jquery - por - cómo lidiar con el mapa de google dentro de un div oculto(Imagen actualizada)

mostrar elemento con display

Question

Tengo una página y un mapa de google está dentro de un div oculto al principio. Luego, muestro el div luego 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 en él.

Answer 1

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

No es suficiente llamar a google.maps.event.trigger(map, ''resize''); Deberías restablecer el centro del mapa también.

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)

Enlace directamente a la visibilidad del elemento más que al valor vinculado a ng-show, porque el $ watch puede dispararse antes de que el ng-show se actualice (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();
})

Answer 2

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

Answer 3

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 div, por lo que actualizará el contenido del mapa sin tener que presionar F5

Answer 4

Al mostrar el mapa, estoy geocodificando una dirección y configurando el centro de mapas. The google.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());
                });

            }
        });

Answer 5

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

Answer 6

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

Answer 7

He encontrado que esto funciona para mí:

esconder:

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

mostrar:

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

Answer 8

Justo como lo han indicado John Doppelmann y HoffZ, coloque todos los códigos de la siguiente manera en su función de representación div o evento onclick:

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

Funcionó perfectamente para mí

Answer 9

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

Answer 10

Mi solución fue:

CSS:

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

jQuery:

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

Answer 11

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 para agregar clase al elemento oculto para mostrarlo y ocultarlo con la posición absoluta en su lugar, luego renderizar el mapa y eliminar la clase después de cargar el mapa.

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

Answer 12

O si usa gmaps.js , llame a:

map.refresh();

cuando tu div es mostrado.

Answer 13

Primer comentario. Mi div de googleMap 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 estar visible antes de que se pueda invocar initialize.

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

Answer 14

Si se usa dentro de las pestañas de 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-location es el ID de la pestaña que contiene el mapa.

Answer 15

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

Answer 16

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

Answer 17

Tuve el mismo problema, 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.

Answer 18

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

Answer 19

Si tiene insertado un mapa de Google al copiar / pegar el código del cuadro flotante 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 e lo inserta en el mismo lugar, por lo que lo renderiza de nuevo:

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

Versión 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>

Answer 20

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

Answer 21

function init_map() {
  var myOptions = {
    zoom: 16,
    center: new google.maps.LatLng(0.0, 0.0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById(''gmap_canvas''), myOptions);
  marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0.0, 0.0)
  });
  infowindow = new google.maps.InfoWindow({
    content: ''content''
  });
  google.maps.event.addListener(marker, ''click'', function() {
    infowindow.open(map, marker);
  });
  infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, ''load'', init_map);

jQuery(window).resize(function() {
  init_map();
});
jQuery(''.open-map'').on(''click'', function() {
  init_map();
});

<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''></script>

<button type="button" class="open-map"></button>
<div style=''overflow:hidden;height:250px;width:100%;''>
  <div id=''gmap_canvas'' style=''height:250px;width:100%;''></div>
</div>

Answer 22

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

Answer 23

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 div que contiene GMAP.