css - toda - div que ocupe todo el alto de la pantalla
Establecer ancho y alto DIV de contenedor de Google Maps 100% (10)
Acabo de agregar estilo en línea.
<div id="map_canvas" style="width:750px;height:484px;"></div>
Y funcionó para mí .
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.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
¿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 .
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
Y CSS simple
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Probado en todos los navegadores. Aquí está la captura de pantalla .
Este trabajo para mi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
Esto funcionó para mí.
map_canvas {position: absolute; arriba: 0; Derecha: 0; abajo: 0; izquierda: 0;}
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.
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:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
elimine todo el estilo en línea y agregue clase o ID y luego ajústelo de la manera que desee.
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.
Puede establecer la altura en -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Si ese div es lo único en su página, configure:
body, html {
height: 100%;
width: 100%;
}