HTML5 - Cartographie sur mobile - Partie 1

WebApp Html5 Localisation & Google Map

Dans cette article, je vais vous présenter quelques fonctionnalités de l'API Google Map que je trouve intéressante pour la mobilité. Aujourd'hui la mobilité a amené de nouveaux usages, comme par exemple trouver une information en fonction de sa position.(le boulanger le plus prés de moi). Mais on peux imaginer à une multitude d'autres utilisations...

API Geoloalisation

   Dans un premiers temps, il faut vérifier si le navigateur gère bien l'API.

1. if (navigator.geolocation){
2. }

    L'API de géolocalisation est disponible sur :

• Safari Mobile (depuis iOS 3.0)
• Android (depuis la verison 1.6)

De plus tous les grands navigateurs de bureau gère églament l'API :

• (Firefox (>= 3.5)
• Safari (>= 5.0)
• Google Chrome
• Opera(>= 10.60)
• Internet Explorer (>= IE 9))

Pour obtenir la position géographique :

1. navigator.geolocation.getCurrentPosition(function(position){
2.   var latitude = position.coords.latitude;
3.   var longitude = position.coords.longitude;
4.         alert('Latitude :' + latitude + ' Longitude : ' + longitude);
5.    },function(error){
6.            alert(error.Message);
7.    });

Le prototype de la méthode getCurrentPosition() est le suivant :

1. void getCurrentPosition(PositionCallback successCallback,
2.            optional PositionErrorCallback errorCallback,
3.            optional PositionOptions options);

API Google Map

Maintenant que l'on a obtenu notre localisation en coordonnée géographique, il peut être intéressant de l'afficher sur une map. Pour cela nous allons utiliser l'API Google Map.

Tout d'abord il faut intégrer l'API Google Map à la page.

1. < script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=yourKey&sensor=false" >< /script>

Ensuite dans votre code HTML placez la balise suivante :

1. < div id="map" />

Cette section va permettre l'affiche de Map. Maintenant en javascript, nous allons instancier un élément google.maps.Map(mapDiv:Node, opts?:MapOptions) qui sera intégré à la balise div.

1. var element = document.getElementById("map");
2. map = new google.maps.Map(element, {
3.   center: new google.maps.LatLng(latitude, longitude),
4.   zoom:  15,
5.   mapTypeId: google.maps.MapTypeId.ROADMAP
6. });

L'option mapTypeId permet d'afficher les différents layers Google Map, comme satellite, plan

• HYBRID
• ROADMAP
• SATELLITE
• TERRAIN

Il est possible de passer d'autres paramètres comme un style,la possibilité ou non de zoomer...

Afficher une position

Pour afficher notre position, on utilise l'objet Marker(opts?:MarkerOptions). On lui affecte alors la position en type LatLng(latitude, longitude). Et on affecte notre map à la propriété du même nom.

1. var latlng = new google.maps.LatLng(latitude, longitude);
2. var marker = new google.maps.Marker({
3.                 position: latlng,
4.                 map: map
5.            });

Maintenant on va afficher une petite fenêtre dans laquelle on peut ajouter du code html.

1. var infowindow = new google.maps.InfoWindow();
2. infowindow.setContent('
3.           +latitude +','+longitude
4.           +'); 
5. infowindow.open(map, marker);

Conclusion

Nous avons pu voir dans cette article, qu'il n'est pas très difficile de mettre en place un système de géolocalisation sur son site web. Et en plus, cette fonctionnalité est cross-plateforme (iphone, ipad, android).

Dans la prochaine partie de cette article, on rentrera un peu plus en détail sur les différentes possibilités pour dessiner et afficher de l'information sur une map.

Merci d'avoir lu cet article, un partage sur les réseaux sociaux, ou un commentaire j'en serai très heureux.