jquery mobile + google maps/mauvaise hauteur

hélas avec le code suivant, cela ne fonctionne pas - seulement un peu de la carte est visible, à l'en-tête. Peut-être que quelqu'un peut aider?jquery mobile + google maps/mauvaise hauteur

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Map 2.0</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" /> 
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body> 
    <div data-role="page" id="map_page"> 

     <div data-role="header"> 
      <h1> 
       Map 
      </h1> 
     </div> 

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

    </div> 
    </body> 
</html>

js:

$("#map_page").live("pageinit", function() { 

    var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

css:

html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#map_canvas { height: 100% }

Salue

@Omar: J'ai essayé de modifier le code avec vos suggestions, mais il ne fonctionne toujours pas . Peut-être que j'ai oublié quelque chose?

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Map 2.0</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body> 
    <div data-role="page" id="map_page"> 

     <div data-role="header"> 
      <h1> 
       Map 
      </h1> 
     </div> 

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

    </div> 
</body> 
</html>

js:

$("#map_page").on("pageshow", function() { 

    var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

css:

html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#map_canvas { height: 100% }

Greets de l'Allemagne & Maroc

Source

2013-05-19 Gi Joe

En tête, chargez jquery mobile avant google maps. Et au lieu de 'pageinit', essayez' pageshow'. Utilisez toujours '.on' au lieu de' .live'. En outre, utilisez un div séparé pour la carte dans div contenu. – Omar

@Omar Hélas, cela ne fonctionne toujours pas, s'il vous plaît voir ma question mise à jour. –

avec jQuery Mobile 1.3.1, utilisez jQuery 1.9.1 '' – Omar

Voici un exemple de travail: http://jsfiddle.net/Gajotres/7kGdE/

La page de carte doit être initialisée pendant l'événement pageshow, car seule la hauteur correcte peut être calculée à ce moment.

utiliser également de cette fonction est nécessaire:

function getRealContentHeight() { 
    var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
    var viewport_height = $(window).height(); 

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
     content_height -= (content.outerHeight() - content.height()); 
    } 
    return content_height; 
}

Il est utilisé pour définir une hauteur correcte du contenu en fonction de la hauteur disponible, en-tête et pied de page de hauteur. Si vous jetez un oeil à ce ARTICLE vous trouverez beaucoup plus d'informations avec quelques exemples.

Source

2013-05-19 11:48:23 Gajotres

Merci, maintenant ça marche! –

Fait ma journée. Merci! –

jquery mobile + google maps/mauvaise hauteur

Répondre

Questions connexes