los mapas de Google en jQuery Mobile

Question

Cuando muestra un mapa de Google en jQuery Mobile aparece (después de leer los foros) que el código como se requiere lo siguiente:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;"> 
    <div data-role="header"><h1>Map Page</h1></div> 
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
     <div id="map_canvas" style="width:100%; height:100%;"></div> 
    </div> 
</div> 

Quitando la altura de div exterior hace que el div de caer a la altura 0 y el mapa no se muestra. Esperaba obtener un poco de texto dinámico debajo del mapa (basado en el contenido del) qué longitud no conozco, así que no puedo establecer una altura absoluta. ¿Alguien ha encontrado una solución para este problema?

Answer 1

Esto no es una cuestión relacionada con los mapas de Google, la cosa es, es necesario establecer un ancho específico y la altura de su lienzo Mapa, el código podría ser reescrita como:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;"> 
    <div data-role="header"><h1>Map Page</h1></div> 
    <div data-role="content" style="padding:0;"> 
     <div id="map_canvas" style="width:300px; height:300px;"></div> 
     <p id="text">Lorem ipsum legere facilisi conclusionemque pro et, sint aperiam vel at. No postea scaevola vivendum duo, et vix erant paulo. Ex fuisset perfecto vix. No sit laudem noster scriptorem, probatus assueverit ius cu.</p> 
    </div> 
</div> 

Example link

---

ACTUALIZACIÓN: Echa un vistazo @Blowsie comentario, también puede consultar el jquery-ui-map plugin.

Answer 2

Solución rápida y sucia que trabajó para mí:

$('[data-role=content]') 
    .height(
    $(window).height() - 
    (5 + $('[data-role=header]').last().height() 
    + $('[data-role=footer]').last().height()) 
); 
// tell google to resize the map 
google.maps.event.trigger(map, 'resize'); 

Answer 3

Hay un ejemplo oficial para esta aquí: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

HTML:

<div data-role="page" class="page-map"> 
    <script src="map.js"></script> 
    <link rel="stylesheet" href="map.css" /> 

    <div data-role="header"><h1>Map View</h1></div> 
    <div data-role="content"> 
     <div id="map-canvas"> 

      <!-- map loads here... --> 
     </div> 
    </div> 
</div> 

CSS:

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; } 

Answer 4

Bueno aquí ho w Lo hice y funcionó para mí.

<div data-role="page" id="atm" data-theme="b"> 
<div data-role="header" data-theme="b" data-position="inline" class="classHeader"> 
     <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Options</a> 
     <h1>Location</h1> 
    </div> 

    <div data-role="content" id="map_canvas"></div> 

    <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter"> 
     <h1>Copyright © 2011.</h1> 
    </div> 

</div> 

A continuación, agréguelos a su archivo CSS.

.classHeader{ 
height:10% !important; 
} 

.classFooter{ 
height:10% !important; 
} 

#map_canvas{ 
padding-top:10%; 
padding-bottom:10%; 
height:auto; 
position:absolute; 
width:100%; 
height:88%; 
max-height:1600px; 
overflow:hidden; 
display:block; 
} 

Esto funciona perfectamente para mí.