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!