Come posso visualizzare una mappa google a schermo intero con jQuery Mobile?

Il codice seguente mostra uno strano output. Dovrei vedere una mappa mobile a schermo intero. Ma per qualche ragione mostra solo una parte dello schermo. Sto usando jquery.ui.map per la mapping.

   My Page           My Title
 
  
 
  $('#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); }); }); }); });

Produzione:

inserisci la descrizione dell'immagine qui

Grazie in anticipo.

La soluzione per il mio sito web mobile era di impostare la position:absolute; width:100%; height:100%; stili position:absolute; width:100%; height:100%; position:absolute; width:100%; height:100%; per il div di canvas Puoi usare gli stili top e bottom per lasciare spazio alle barre degli strumenti.

Intestazione e piè di pagina sono inevitabili se si utilizza jQuery. Ho impostato {data-position="fixed" data-fullscreen="true"} sia per l’intestazione che per il piè di pagina e ho impostato html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; } , così che sia il menu che la mappa funzionano perfettamente insieme sul dispositivo mobile.

La canvas del contenitore e della mappa deve essere al 100% di larghezza e altezza.

La loro struttura dal sito mobile di jQuery è:

   Maps

E il CSS:

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

Da qui: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

Ho lavorato un po ‘con questo e sono riuscito a trovare la soluzione perfetta. Si rivolge a pagine con o senza intestazione. Posizionerà la mappa perfettamente nello spazio tra l’intestazione e il fondo della pagina (o sull’intera pagina se non è presente un’intestazione), per qualsiasi risoluzione e qualsiasi altezza di intestazione.

Questa soluzione richiede sia CSS che JS se la pagina ha un’intestazione e CSS solo se la pagina non ha un’intestazione.

HTML

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