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 !
Merci Tonio,
RépondreSupprimerça m'a bien aidé :-)
Moi qui galèrait avec ma map qui voulait pas prendre toute la largeur de la page, malgré des width:100% en CSS.
Avec la largeur fixé en px, mais dynamiquement, ça marche mieux.
Bilan : +1 Tonio ; -1 Google qui sur le coup est un peu moyen :-(
Merci Tonio pour cet exemple.
RépondreSupprimeril manque à mon avis l'appel à la library maps de google avec une ligne comme src="http://maps.google.com/maps/api/js?sensor=false"
Pourais-tu indiquer comme ajouter une punaise personnalisée et une boite d'info qui s'ouvre quand on clique dessus ?
Merci pour ce tuto.
Franck
Tout dépend de ce que tu souhaites avoir comme boite info. Si c'est une boite info de l'API Google Map, tu peux regarder les examples sur la documentation de référence de l'API javascript. si c'est une popup Android Native que tu souhaite ouvrir, il faut intégrer la JavascriptInterface dans ta WebView.
RépondreSupprimerUne autre possibilité peut être d'ouvrir une popup jQuery Mobile.
Très bon article merci pour l'idée !
RépondreSupprimerPour que la carte ait toujours la bonne largeur, j'ai ajouté :
$(window).bind("orientationchange resize pageshow", geometrychanged);
pour détecter les changements portrait/paysage, et dans geometrychanged() : $("#map_canvas").width( $(document).width() );
Très bonne idée !
RépondreSupprimerPour compléter, on peut également choisir de fixer l'orientation de l'écran en mode paysage ou portrait dans le fichier AndroidManifest.xml via l'attribut screenOrientation du tag activity.
"AndroidManifest.xml " .. hum ça sent le phonegap ;) A quand une 'tite page de démo pour tester ça sur différents navigateurs ?
RépondreSupprimerob