jQuery mobile est arrivé en version finale il y a quelques jours. Voyons avec quelle simplicité jQuery mobile nous permet de créer des Mashups à base de
Google Map API et portable sur n'importe quel
terminal mobile supporté par jQuery mobile.
Récupération du template HTML5
jQuery mobile propose des templates de pages permettant de démarrer rapidement. Nous utiliserons le template suivant, légèrement modifié afin de pouvoir utiliser les icones personnalisées
map icons de Nicolas Mollet disponible sous licence
Creative Commons 3.0 BY-SA :
<!DOCTYPE html>
<html>
<head>
<title>Fullscreen Google map with jQuery mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="map" data-theme="a">
<div data-role="header" id="header" data-position="fixed">
<h1>Fullscreen Google map with jQuery mobile</h1>
</div>
<div data-role="content" id="content">
<!-- carte google map -->
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a class="ui-btn ui-btn-icon-top ui-btn-up-a ui-btn-active"
data-icon="information" href="#" >
Infos
</a>
</li>
<li>
<a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="favorite" href="#">
Favoris
</a>
</li>
<li>
<a class="ui-btn ui-btn-icon-top ui-btn-up-a" data-icon="radar" href="#">
Radars
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Les icônes personnalisées déposées dans le répertoire
static/images sont mises en place avec le CSS personnalisé ci dessous :
<style type="text/css">
.ui-icon.ui-icon-favorite, .ui-icon.ui-icon-radar,
.ui-icon.ui-icon-information, .ui-icon.ui-icon-evenement {
margin-top: -16px;
margin-left: -19px;
width: 37px;
height: 37px;
box-shadow: none;
}
.ui-icon.ui-icon-favorite {
background: url(static/images/favorite.png) top center;
}
.ui-icon.ui-icon-radar {
background: url(static/images/radar.png) top center;
}
.ui-icon.ui-icon-information {
background: url(static/images/information.png) top center;
}
.ui-icon.ui-icon-evenement {
background: url(static/images/evenement.png) top center;
}
</style>
Ce qui nous donne le rendu de page suivant, avec sa barre de navigation style iPhone contenant nos icônes personnalisées :
Chargement de la carte Google en plain écran
L'étape suivante consiste à charger notre carte et à dimensionner son conteneur de façon à ce qu'il occupe la totalité de l'écran. Le padding du corps de la page qui contient le conteneur de la carte est positionné à 0 :
<div data-role="content" id="content" style="padding:0">
<div id="map_canvas"></div>
</div>
L'événement
pageshow de la page est utilisé pour de déterminer les dimensions maximales de la carte afin qu'elle occupe tout l'espace disponible. Cet évènement permet de s'assurer que tous les widgets jQuery mobiles ont été initialisés par le framework :
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.7452, 4.8418);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
}
$('#map').live('pageshow', function(event) {
$("#map_canvas").width($(document).width());
$("#map_canvas").height(
$(window).height()
- $("div.ui-footer").outerHeight()
- $("div.ui-header").outerHeight()
);
initialize();
});
</script>
Et voila, comme diraient nos amis anglophones !
