I. Traduction▲
Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Create Google Maps With Gmap.js.
II. Introduction▲
L'utilisation de cartes géographiques est de plus en plus répandue sur le Web.
En effet, les API permettant d'utiliser les cartes Google ou bien d'autres sont nombreuses, et cela permet d'ajouter une dimension géographique à votre site, pour par exemple afficher un plan, un itinéraire ou encore la localisation de magasins.
Les plus connues sont les Google Maps. Et c'est de Google Maps dont nous allons parler aujourd'hui, avec un plugin jQuery vous permettant de les intégrer simplement dans votre site.
III. Comment utiliser Gmap.js ?▲
GMap est un plugin JavaScript qui facilite énormément l'intégration de Google Map pour afficher une carte à vos utilisateurs. Il offre plusieurs fonctionnalités qui facilitent l'ajout de pointeurs sur la carte, d'itinéraires, de boites d'informations et bien plus encore.
Ce plugin est très complet du fait de ses nombreuses options ; nous n'allons en détailler que quelques-unes dans ce tutoriel : les plus utiles.
Pour commencer à utiliser Gmap.js vous devez télécharger la dernière version sur GitHub.
Une fois que c'est fait, il faut inclure le fichier JavaScript ainsi que jQuery dans votre page.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="gmaps.js"></script>
</head>
<body>
</body>
</html>En ajoutant le fichier gmap.js à votre page vous allez créer un objet JavaScript appelé « GMaps » que vous utiliserez pour créer vos cartes.
IV. Carte basique▲
Dans cet exemple nous allons créer une carte basique stockée dans une div. C'est la façon la plus simple d'utiliser Gmap.js, tout ce dont vous avez besoin est d'un peu de code JavaScript et d'une div.
Tout d'abord il faut inclure le fichier JavaScript comme décrit plus haut et créer la div.
<div id="basic_map"></div>Maintenant nous pouvons écrire le code JavaScript qui va ajouter une carte dans la page. Pour cet exemple nous allons utiliser comme point central de la carte la ville de Londres. Nous pouvons définir un certain nombre d'options pour avoir le zoom, la vue « street view », etc.
/**
* Basic Map
*/
$(document).ready(function(){
var map = new GMaps({
el: '#basic_map',
lat: 51.5073346,
lng: -0.1276831,
zoom: 12,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
});
});
V. Événements « souris » sur la carte▲
Avoir une carte qui répond à des interactions utilisateur peut s'avérer très utile, c'est pourquoi Gmap.js intègre différents événements liés à la souris pour votre carte. Dans notre exemple nous allons utiliser l'événement click et l'événement drag pour afficher un message d'alerte.
Le code HTML reste très simple.
<div id="mouse_event_map"></div>Nous pouvons utiliser la même carte que précédemment. Nous allons simplement ajouter des fonctions qui se lanceront sur les deux événements et pour ce faire, modifier les options correspondantes.
/**
* Mouse Events on Maps
*/
$(document).ready(function(){
var map = new GMaps({
el: '#mouse_event_map',
lat: 51.5073346,
lng: -0.1276831,
zoom: 12,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
click: function(e){
alert('Click event');
},
dragend: function(e){
alert('Drag Event');
}
});
});
VI. Créer des marqueurs avec des infobulles▲
La prochaine fonctionnalité que nous allons étudier est la possibilité d'ajouter des marqueurs sur la carte à une latitude et une longitude précises. Avec Gmap il est très simple d'implémenter ces marqueurs, et on peut ajouter une infobulle contenant des informations détaillées en HTML qui apparaît au clic sur un marqueur.
<div id="pointers_map"></div>Pour cet exemple nous allons utiliser les monuments les plus connus de Londres en tant que marqueurs.
Pour ajouter un marqueur c'est très simple il suffit d'utiliser la méthode addMarker().
map.addMarker({
lat: 51.5007396,
lng: -0.1245299,
title: 'Big Ben',
infoWindow: {
content: '
Big Ben is the nickname for the great bell of the clock at the north end of the Palace of Westminster in London, and often extended to refer to the clock and the clock tower, officially named Elizabeth Tower.
'
}
});On utilise cette méthode sur l'objet retourné par la classe GMap.
/**
* Map Pointers
*/
$(document).ready(function(){
var map = new GMaps({
el: '#pointers_map',
lat: 51.5073346,
lng: -0.1276831,
zoom: 13,
zoomControl : true,
zoomControlOpt: {
style : 'SMALL',
position: 'TOP_LEFT'
},
panControl : false,
});
map.addMarker({
lat: 51.503324,
lng: -0.119543,
title: 'London Eye',
infoWindow: {
content: '
The London Eye is a giant Ferris wheel situated on the banks of the River Thames in London, England. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).
' }
});
map.addMarker({
lat: 51.5007396,
lng: -0.1245299,
title: 'Big Ben',
infoWindow: {
content: '
Big Ben is the nickname for the great bell of the clock at the north end of the Palace of Westminster in London, and often extended to refer to the clock and the clock tower, officially named Elizabeth Tower.
'
}
});
map.addMarker({
lat: 51.518856,
lng: -0.1263371,
title: 'British Museum',
infoWindow: {
content: '
The British Museum is a museum in London dedicated to human history and culture.
'
}
});
map.addMarker({
lat: 51.5085822,
lng: -0.1283169,
title: 'National Gallery',
infoWindow: {
content: '
The National Gallery is an art museum on Trafalgar Square, London. Founded in 1824, it houses a collection of over 2,300 paintings dating from the mid-13th century to 1900.
'
}
});
map.addMarker({
lat: 51.5228316,
lng: -0.1553503,
title: 'Madame Tussauds',
infoWindow: {
content: '
Madame Tussauds is a wax museum in London with branches in a number of major cities.
'
}
});
map.addMarker({
lat: 51.5089465,
lng: -0.0764269,
title: 'Tower Of London',
infoWindow: {
content: '
Her Majesty\'s Royal Palace and Fortress, more commonly known as the Tower of London, is a historic castle on the north bank of the River Thames in central London, England, United Kingdom.
'
}
});Voici un aperçu du résultat :
VII. Utiliser la géolocalisation▲
La géolocalisation va autoriser votre navigateur à vous localiser en récupérant vos latitude et longitude exactes, ce qui est très utile pour les cartes sur des appareils mobiles. En effet si vous cherchez un itinéraire depuis votre téléphone portable, il y a de grandes chances que le point de départ soit votre localisation actuelle.
Avec Gmap.js nous pouvons facilement utiliser une propriété de l'objet pour obtenir votre localisation et placer un marqueur sur la carte qui correspond à celle-ci.
On crée tout d'abord la div comme précédemment.
<div id="geolocation_map"></div>Copiez ensuite le code JavaScript suivant pour ajouter un marqueur sur la carte correspondant à votre localisation. Ce code utilise la méthode geolocate() sur l'objet GMap.
/**
* Geolocation
*/
var map;
$(document).ready(function(){
var map = new GMaps({
el: '#geolocation_map',
lat: 51.5073346,
lng: -0.1276831,
});
GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
map.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude,
title: 'You are here.',
infoWindow: {
content: '
You are here!
'
}
});
},
error: function(error){
alert('Geolocation failed: '+error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
}
});
});
VIII. Itinéraire▲
Dans l'exemple précédent, on parlait de l'utilité de la géolocalisation sur appareils mobiles pour définir des itinéraires.
Grâce à Gmap.js obtenir la géolocalisation de l'utilisateur et dessiner un itinéraire sont deux choses très simples. En premier lieu on récupère la localisation du visiteur grâce à la méthode décrite ci-dessus puis on dessine l'itinéraire grâce à la méthode drawRoute() avec comme point de départ la localisation obtenue et comme point d'arrivée la destination de notre choix.
/**
* Directions to London
*/
var map;
$(document).ready(function(){
var map = new GMaps({
el: '#directions_map',
lat: 51.5073346,
lng: -0.1276831,
zoom:8
});
GMaps.geolocate({
success: function(position){
map.setCenter(position.coords.latitude, position.coords.longitude);
map.drawRoute({
origin: [position.coords.latitude, position.coords.longitude],
destination: [51.5073346, -0.1276831],
travelMode: 'driving',
strokeColor: '#000',
strokeOpacity: 0.6,
strokeWeight: 6
});
},
error: function(error){
alert('Geolocation failed: '+error.message);
},
not_supported: function(){
alert("Your browser does not support geolocation");
}
});
});
IX. Carte statique▲
Parfois quand vous affichez une carte sur une page vous ne voulez pas que l'utilisateur puisse interagir avec elle, vous souhaitez uniquement afficher l'image de la carte.
Avec Gmap.js vous pouvez faire en sorte d'afficher une image de n'importe quelle carte. Vous pouvez définir la taille de l'image et la localisation qui correspond. Il suffit de l'afficher ensuite dans une div.
X. Conclusion▲
Nous avons vu dans ce tutoriel que l'on peut intégrer des cartes Google Maps très simplement dans un site en utilisant le plugin Gmap.js.
Cet article ne montre que quelques exemples ; pour avoir une liste exhaustive, vous pouvez consulter la liste d'exemples sur GitHub.
XI. Liens▲
Vous pouvez consulter la démonstration pour avoir un aperçu du rendu dans un navigateur.
XII. Remerciements▲
Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.