Google maps в jQuery mobile

При отображении карты google в jQuery mobile появляется (после прочтения форумов), что требуется следующий код:

<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>

Удаление высоты на внешней стороне div приводит к тому, что div падает до высоты 0, а карта не отображается. Я надеялся получить динамический текст ниже карты (на основе содержимого на), длина которой я не знаю, поэтому я не могу установить абсолютную высоту. Кто-нибудь получил обходной путь для этой проблемы?

Ответ 1

Это не проблема, связанная с картами Google. Дело в том, что вам нужно установить определенную ширину и высоту для вашего холста карты, ваш код можно переписать следующим образом:

<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>

Пример ссылки

ОБНОВЛЕНИЕ: Посмотрите комментарий @Blowsie, вы также можете проверить плагин jquery-ui-map. p >

Ответ 2

Для этого есть официальный пример: 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; }

Ответ 3

Хорошо, вот как я это сделал, и это сработало для меня.

<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>

Затем добавьте их в свой 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;
}

Это отлично работает для меня.

Ответ 4

Быстрое и грязное исправление, которое сработало для меня:

$('[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');