¿Cómo puedo visualizar un mapa de google de pantalla completa con jQuery Mobile?

El siguiente código muestra resultados extraños. Debería ver un mapa móvil de pantalla completa. Pero por alguna razón, se muestra solo en una parte de la pantalla. Estoy usando jquery.ui.map para mapeo.¿Cómo puedo visualizar un mapa de google de pantalla completa 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>

Salida:

enter image description here

Gracias de antemano.

Fuente

2012-05-02 Shahjalal

La solución para mi sitio web móvil era establecer los estilos position:absolute; width:100%; height:100%; para el lienzo div. Puede usar los estilos top y bottom para dejar espacio para las barras de herramientas.

Fuente

2012-05-02 00:48:26

gracias .. funciona ... – Shahjalal

'posición: es lo que absolute' Washington falta, ¡gracias! – Dennis

piense también en cambiar el tamaño del mapa: google.maps.event.trigger (map, "resize"); –

El lienzo de contenedor y mapa debe tener un ancho y una altura del 100%.

Desde el sitio web para móviles jQuery su estructura es:

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

Y el CSS:

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

A partir de aquí: http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

Fuente

2013-06-01 11:49:09

Encabezado y pie de página son inevitables si estás usando jQuery. Configuré {data-position="fixed" data-fullscreen="true"} tanto para el encabezado como para el pie de página, y configuré también html { height: 100% } body { height: 100%; margin: 0; } #map { position:absolute; width: 100%; height: 100%; padding: 0; }, para que tanto el menú como el mapa funcionen perfectamente en el dispositivo móvil.

Fuente

2014-07-25 17:02:06

He estado buscando esta solución por un día. ¡Esto funciona increíblemente bien! Muchas gracias. –

He estado jugando con esto por un tiempo, y logré encontrar la solución perfecta. Atiende páginas con o sin encabezado. Posicionará el mapa perfectamente en el espacio entre el encabezado y la parte inferior de la página (o en toda la página si no hay un encabezado), para cualquier resolución y altura de encabezado.

Esta solución requiere CSS y JS si la página tiene un encabezado y CSS solo si la página no tiene un encabezado.

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

Fuente

2015-07-19 19:22:00

¿Cómo puedo visualizar un mapa de google de pantalla completa con jQuery Mobile?

Respuesta

Cuestiones relacionadas