css - jquerymobileのグーグルマップ

Question

jquery mobileで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="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

外側のdivの高さを削除すると、divが高さ0に下がり、マップが表示されなくなります。マップの下に（の内容に基づいて）動的なテキストを取得したいと思っていましたが、長さがわからないため、絶対的な高さを設定できません。誰かがこの問題の回避策を持っていますか？

Answer 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プラグインも確認できます。

Answer 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; }

Answer 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;
}

これは私にとって完璧に機能しています。

Answer 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');