jQuery MobileでフルスクリーンのGoogleマップを表示するにはどうすればよいですか？

次のコードは、奇妙な出力を表示します。フルスクリーンのモバイル地図が表示されます。しかし何らかの理由で、画面の一部にしか表示されません。私はマッピングのためにjquery.ui.mapを使用しています。jQuery MobileでフルスクリーンのGoogleマップを表示するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/jquery.mobile-1.1.0.min.css" /> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.ui.map.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>My Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" id="map_canvas" name="contentMain"> 

    </div><!-- /content --> 

</div><!-- /page --> 
<script> 

    $('#map_canvas').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it 
    // see http://en.wikipedia.org/wiki/Same_origin_policy 
    $.getJSON('http://jquery-ui-map.googlecode.com/svn/trunk/demos/json/demo.json', function(data) { 
     $.each(data.markers, function(i, marker) { 
      $('#map_canvas').gmap('addMarker', { 
       'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
       'bounds': true 
      }).click(function() { 
       $('#map_canvas').gmap('openInfoWindow', { 'content': marker.content }, this); 
      }); 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

出力：事前に

enter image description here

感謝。

出典

2012-05-02 Shahjalal

私のモバイルサイトのソリューションは、キャンバスのdivにスタイルposition:absolute; width:100%; height:100%;を設定することでした。 topとbottomのスタイルを使用して、ツールバーのスペースを残すことができます。

出典

2012-05-02 00:48:26

感謝...それは... – Shahjalal

'位置に動作します：absolute'は何私でありますワありがとう！ – Dennis

マップのサイズを変更することも考えてください：google.maps.event.trigger（map、 "resize"）; –

コンテナとマップキャンバスの幅と高さは100％にする必要があります。

その構造があるjQueryのモバイルウェブサイトから：ここから

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

：

<div data-role="page" id="map-page" data-url="map-page"> 
    <div data-role="header" data-theme="c"> 
     <h1>Maps</h1> 
    </div> 
    <div data-role="content" id="map-canvas"> 
     <!-- map loads here... --> 
    </div> 
</div>

そして、CSS、あなたがしている場合http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

出典

2013-06-01 11:49:09

ヘッダーとフッターは避けられませんjQueryを使用します。ヘッダーとフッターの両方に{data-position="fixed" data-fullscreen="true"}を設定し、html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; }も設定して、メニューとマップの両方がモバイルデバイス上で完全に連携するようにします。

出典

2014-07-25 17:02:06

私はこのソリューションを1日探しています。これは信じられないほどうまくいく！本当にありがとう。 –

私はこれをちょっと気にしていて、完璧な解決策を見つけることができました。ヘッダーの有無にかかわらずページを処理します。任意の解像度とヘッダーの高さに対して、ヘッダーとページの下部の間（またはヘッダーがない場合はページ全体）にマップを完全に配置します。

このソリューションでは、ページにヘッダーがある場合はCSSとJSの両方が必要で、ページにヘッダーがない場合のみCSSが必要です。

HTML

<div data-role="page" id="mapPage"> 
    <div data-role="header"`> 
     <!-- your header HTML... --> 
    </div> 

    <div data-role="content"> 
     <div id="map-canvas"></div> 
     <p id="nogeolocation"></p> 
    </div> 
</div>

CSS

#map-canvas { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
} 

/* eliminates scrollbars in map infowindow (optional) */ 
#mappopup { 
    line-height: 1.35; 
    overflow: hidden; 
    white-space: nowrap; 
}

var mapPageHeader = $("#mapPage .ui-header").eq(0); 
if(mapPageHeader.length > 0) { 
    var headerHeight = mapPageHeader.outerHeight(); 
    $("#map-canvas").css({ 
     'height': ($(window).height() - headerHeight + 1) + 'px', 
     'top': headerHeight - 1 
    }); 
}

出典

2015-07-19 19:22:00

jQuery MobileでフルスクリーンのGoogleマップを表示するにはどうすればよいですか？

答えて

関連する問題