Google Maps avec jquery.mobile: comment redimensionner correctement la carte?

Question

J'écris une application mobile de jquery qui a besoin d'une carte.

Pour la carte, je prévois d'utiliser le service Google Maps.

Pour tenir compte des changements d'orientation, j'ai essayé d'utiliser quelque chose comme:

<script> 
$('#page-map').live('pagecreate', function(event) { 
    var map = $('#map_canvas').gmap({ 
     ... 
    }); 
    ... 
    $(window).resize(function() { 
     $('#map_canvas').width($(window).width()); 
     $('#map_canvas').height($(window).height()); 
    }); 
)}; 
</script> 

Le problème: ce code redimensionne correctement la toile de carte lorsque l'appareil est mis en rotation, mais il semble que jquery Redimensionner mobile() est sauté (la barre d'URL est visible, par exemple ...).

Pas même en ajoutant à la "redimensionner (function() {" code quelque chose comme ceci:

google.maps.event.trigger(map, 'resize'); 

est de toute aide

MISE À JOUR:. Le problème ne se produit que sur le seul appareil mobile Je teste mes pages - un Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread) .Il ne pas se produire lors du redimensionnement de la fenêtre sur un ordinateur de bureau (par exemple: sur un navigateur de bureau map_canvas est correctement rempli lorsque la fenêtre du navigateur est agrandie, même sans e redimensionner() obligatoire, seulement en raison de la largeur/hauteur à 100% sur map_canvas ...)

Answer 1

j'attribue une taille par ma carte css en jquery mobile
j'ajouter les map_canvas à l'intérieur div avec Dimencion deuin veulent dans ce cas 100%

CSS

#map_content { 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden;} 


#map_canvas { 
width: 100%; 
height: 100%; 
padding: 0; 
text-shadow: none;} 

HTML

  <div data-role="content" id="map_content" data-theme="a"> 
      <div id="map_content"> 
       <div id="map_canvas"></div> 
      </div> 
     </div> 

Answer 2

J'ai essayé la réponse ci-dessus (plus beaucoup d'autres) et rien n'a fonctionné pour moi. En fait, le code ci-dessus fonctionnait pour moi, mais juste jusqu'à ce que j'ai commencé à utiliser jQuery Mobile. D'une certaine manière, quand je charge jQuery Mobile (curieusement, j'ai remarqué que c'est le JS, pas le CSS) map_canvas n'a pas de hauteur (un truc pour vérifier la hauteur de l'élément est d'ajouter une bordure comme border: 1px solid red;).

Finalement, je réussis à résoudre le redimensionnement automatique lorsque les changements d'orientation en utilisant le code suivant/css:

<div data-role="page" id="pageID"> 
    <div role="main" class="ui-content"> 
     <div id="map_canvas"> 
     </div> 
    </div> 
</div> 

Et dans le css:

html, 
body, 
#pageID { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-content { 
    padding: 0; 
} 
.ui-content, 
.ui-content #map_canvas { 
    height: inherit; /* the trick */ 
} 

Donc, fondamentalement: height: inherit; a résolu le problème pour moi.

Crédits: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250

J'espère que ça aide!