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

Il codice seguente mostra un output strano. 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 mappatura.Come posso visualizzare una mappa google a schermo intero con jQuery Mobile?

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

uscita:

enter image description here

Grazie in anticipo.

fonte

2012-05-02 Shahjalal

La soluzione per il mio sito Web mobile era impostare gli stili position:absolute; width:100%; height:100%; per il div canvas. È possibile utilizzare gli stili top e bottom per lasciare spazio per le barre degli strumenti.

fonte

2012-05-02 00:48:26

grazie .. funziona ... – Shahjalal

'posizione: absolute' è quello che ho wa s mancante, grazie! – Dennis

pensa anche a ridimensionare la mappa: google.maps.event.trigger (mappa, "ridimensiona"); –

Il contenitore e la mappa devono essere al 100% di larghezza e altezza.

Dal sito web mobile jQuery la loro struttura è:

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

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

fonte

2013-06-01 11:49:09

Intestazione e piè di pagina sono inevitabili se siete usando jQuery. Ho impostato {data-position="fixed" data-fullscreen="true"} per l'intestazione e il piè di pagina e impostato anche html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; }, in modo che sia il menu che la mappa funzionino perfettamente sul dispositivo mobile.

fonte

2014-07-25 17:02:06

Ho cercato questa soluzione per un giorno. Funziona incredibilmente bene! Grazie mille. –

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

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

fonte

2015-07-19 19:22:00

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

risposta

Problemi correlati