Establecer ancho y alto DIV de contenedor de Google Maps 100%

Cargué Google Maps API v3 e imprimí Google Map en div . Pero cuando establezco ancho y alto en 100% y automáticamente no puedo ver el mapa.

Aquí hay un fragmento de código HTML.

  

¿Hay alguna manera de solucionar este problema?

Debe configurar todos los contenedores principales con un ancho del 100% si desea cubrir toda la página con él. Debe establecer un valor absoluto en ancho y alto para # div de contenido como mínimo.

 body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100%; } 

Establecer el contenedor del mapa en una posición relativa hace el truco. Aquí está HTML .

   

Y CSS simple

  

Probado en todos los navegadores. Aquí está la captura de pantalla .

enter image description here

Muy pocas personas se dan cuenta del poder del posicionamiento css. Para configurar el mapa para que ocupe el 100% de la altura de su contenedor principal, haga lo siguiente:

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

Si tiene elementos no posicionados en absoluto dentro de #map_canvas_container, establecerán la altura del mismo y el mapa tomará el espacio disponible exacto.

Este trabajo para mi

      Untitled Document      

Gmap escribe la posición de estilo en línea en relación con el div. Sobrescriba eso con:

 google.maps.event.addListener(map, 'tilesloaded', function(){ document.getElementById('maps').style.position = 'static'; document.getElementById('maps').style.background = 'none'; }); 

Espero eso ayude.

Puede establecer la altura en -webkit-fill-available

  

Si ese div es lo único en su página, configure:

 body, html { height: 100%; width: 100%; } 

Luché mucho para encontrar la respuesta.

Realmente no necesitas hacer nada con el tamaño del cuerpo. Todo lo que necesita para eliminar el estilo en línea del código del mapa:

 
View Larger Map

elimine todo el estilo en línea y agregue clase o ID y luego ajústelo de la manera que desee.

Esto funcionó para mí.

map_canvas {position: absolute; arriba: 0; Derecha: 0; abajo: 0; izquierda: 0;}

Acabo de agregar estilo en línea.


Y funcionó para mí .