tutorial - google maps javascript api

¿Cómo cambio el tamaño de un Google Map con JavaScript después de que se haya cargado?

Question

Tengo un div ''mapwrap'' establecido en 400px x 400px y dentro tengo un ''mapa'' de Google establecido en 100% x 100%. Así que el mapa se carga a 400 x 400 píxeles, luego con JavaScript cambio el tamaño de la "combinación de mapas" al 100% x 100% de la pantalla: el mapa de Google cambia a toda la pantalla como esperaba, pero los mosaicos comienzan a desaparecer antes del borde derecho del página.

¿Existe una función simple a la que pueda llamar para hacer que el mapa de Google se reajuste al div ''mapwrap'' de mayor tamaño?

Answer 1

Antes que nada, gracias por guiarme y cerrar este tema. Encontré una manera de solucionar este problema en tus discusiones. Sí, vayamos al grano. La cuestión es que estoy usando GoogleMapHelper v3 helper en CakePHP3. Cuando traté de abrir la ventana emergente modal de bootstrap, me llamó la atención el problema de la caja gris sobre el mapa. Ha sido extendido por 2 días. Finalmente tengo una solución sobre esto.

Necesitamos actualizar GoogleMapHelper para solucionar el problema

Es necesario agregar la secuencia de comandos siguiente en la función setCenterMap

google.maps.event.trigger({$id}, /"resize/");

Y necesita el código de inclusión a continuación en JavaScript

google.maps.event.addListenerOnce({$id}, ''idle'', function(){
   setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
   {$this->defaultLongitude}));
});

Answer 2

El map-in-a-box Wolfgang Pichler ofrece a

Cargue un mapa en un elemento div arrastrable y de tamaño variable.

Answer 3

La popular respuesta google.maps.event.trigger(map, "resize"); no funcionó solo para mí

Aquí había un truco que aseguraba que la página se había cargado y que el mapa también se había cargado. Al configurar un oyente y escuchar el estado inactivo del mapa, puede llamar al desencadenador de eventos para cambiar el tamaño.

$(document).ready(function() {
    google.maps.event.addListener(map, "idle", function(){
        google.maps.event.trigger(map, ''resize''); 
    });
}); 

Esta fue mi respuesta que funcionó para mí.

Answer 4

para Google Maps v3, debe desencadenar el evento de cambio de tamaño de forma diferente:

google.maps.event.trigger(map, "resize");

Consulte la documentación del evento de cambio de tamaño (deberá buscar la palabra ''cambiar tamaño''): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Actualizar

Esta respuesta ha estado aquí por mucho tiempo, por lo que una pequeña demostración puede valer la pena y, aunque utiliza jQuery, no hay una necesidad real de hacerlo.

$(function() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  // listen for the window resize event & trigger Google Maps to update too
  $(window).resize(function() {
    // (the ''map'' here is the result of the created ''var map = ...'' above)
    google.maps.event.trigger(map, "resize");
  });
});

html,
body {
  height: 100%;
}
#map-canvas {
  min-width: 200px;
  width: 50%;
  min-height: 200px;
  height: 80%;
  border: 1px solid blue;
}

<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&dummy=.js"></script>
Google Maps resize demo
<div id="map-canvas"></div>

ACTUALIZACIÓN 2018-05-22

Con un nuevo lanzamiento de renderizador en la versión 3.32 de Maps JavaScript API, el evento resize ya no forma parte de la clase Map .

La documentación indica

Cuando se cambia el tamaño del mapa, el centro del mapa se repara

• El control de pantalla completa ahora conserva el centro.

• Ya no es necesario activar el evento de cambio de tamaño manualmente.

fuente: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); no tiene ningún efecto a partir de la versión 3.32

Answer 5

Esto es lo mejor que hará el trabajo hecho. Cambiará el tamaño de su mapa. Ya no es necesario inspeccionar el elemento para cambiar el tamaño de su mapa. Lo que hace activará automáticamente el evento de nuevo tamaño.

    google.maps.event.addListener(map, "idle", function()
        {
            google.maps.event.trigger(map, ''resize'');
        });

        map_array[Next].setZoom( map.getZoom() - 1 );
    map_array[Next].setZoom( map.getZoom() + 1 );

Answer 6

Si está utilizando Google Maps v2, llame checkResize() en su mapa después de cambiar el tamaño del contenedor. link

ACTUALIZAR

Google Maps JavaScript API v2 quedó en desuso en 2011. Ya no está disponible.