javascript - new - que es la api de google maps

Google Maps div no aparece en JSBin

Question

Si configuro mi ancho a 500px, puedo hacer que aparezca el div de map-canvas cuando hago clic en el botón "Comenzar". Si configuro mi altura / ancho al 100%, no aparece.

Quiero estar seguro de que mi proyecto se cargará en un dispositivo móvil, por lo que no quiero usar dimensiones absolutas.

http://jsbin.com/OpujukIF/1/edit?html,css,output

Answer 1

Consulte la explicación de Mike Williams sobre el porcentaje de tamaño de su tutorial de Google Maps JavaScript API v2

html {
height:100%;
width: 100%;
}
body {
padding-top: 50px;
padding-bottom: 20px;
height: 100%;
width: 100%;
}
#map-canvas {
height: 85%;
width: 100%;
}

Answer 2

El uso puede usar posicionamiento absoluto sin width | height width | height , usando top|left|bottom|right con 0 establecido como sus valores, lo que daría como resultado que el #map-canvas div #map-canvas convierta en el tamaño del elemento contenedor #second , siempre que se establezca en relativo de esta manera:

#second {
position: relative;
}
#map-canvas {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}

Aquí está el contenedor actualizado .

¡Espero que esto ayude!