Malheureusement, avec le code suivant, cela ne fonctionne pas - seule une partie de la carte est visible, dans l'en-tête. Peut-être que quelqu'un peut m'aider?
<!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").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% }Salutations
@Omar: J'ai essayé de modifier le code avec vos suggestions, mais cela ne fonctionne toujours pas. Ai-je peut-être manqué 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% }Salutations de l'Allemagne & du Maroc
