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

Tengo un div 'mapwrap' configurado en 400px x 400px y dentro de eso tengo un 'mapa' de Google configurado en 100% x 100%. Entonces, el mapa se carga a 400 x 400px, luego con JavaScript cambio el tamaño del 'mapwrap' al 100% x 100% de la pantalla; el mapa de Google cambia de tamaño 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?

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

ACTUALIZAR

La API de JavaScript de Google Maps v2 quedó obsoleta en 2011. Ya no está disponible.

para Google Maps v3, debe activar el evento de cambio de tamaño de manera diferente:

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

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

Actualizar

Esta respuesta ha estado aquí durante mucho tiempo, por lo que una pequeña demostración podría valer la pena y, aunque usa 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 una nueva versión de renderizador en la versión 3.32 de la API de JavaScript de Maps, el evento de cambio de tamaño ya no forma parte de la Mapclase.

La documentación dice

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

• 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

La respuesta popular 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 activador del evento 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í.

Map -in-a-box de Wolfgang Pichler ofrece

Cargue un mapa en un elemento div que se pueda arrastrar y cambiar de tamaño.

Esto es mejor, 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 cambio de 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 );

En primer lugar, gracias por orientarme y cerrar este tema. Encontré una manera de solucionar este problema en sus discusiones. Sí, vayamos al grano. Lo que pasa es que estoy usando el asistente GoogleMapHelper v3 en CakePHP3. Cuando intenté abrir la ventana emergente modal de bootstrap, me sorprendió el problema del cuadro gris sobre el mapa. Se ha extendido por 2 días. Finalmente conseguí una solución a esto.

Necesitamos actualizar GoogleMapHelper para solucionar el problema

Necesita agregar el siguiente script en la función setCenterMap

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

Y necesita incluir el siguiente código en JavaScript

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