J’ai eu l’occasion la semaine dernière, de jouer avec l’API Google Maps. Récupération de données en json auprès d’un serveur en lui demandant de filtrer les résultats sur la valeur d’un champ. Je présente ici, une version simplifiée, j’ai placé des données en dur dans mon fichier .js, quelques gares: Nom, Région, Latitude, Longitude, et je m’arrange pour afficher leur position avec l’API de Google.
On prépare d’abord la page Html qui va recevoir le tout. On ajoute le JS de l’API:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=VOTRE_CLE&sensor=false">
</script>
En remplaçant VOTRE_CLE par la cle d’API générée par Google.
On place une balise <div> pour accueillir la map une fois celle-ci générée.
Initialisation de la Google Maps
var mapOptions = {
center: new google.maps.LatLng(47.2, 2),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
Pour créer un marqueur:
var latlng = new google.maps.LatLng(latitude, longitude);
var marker = new google.maps.Marker({
position: latlng,
title: "Titre du marqueur"
});
marker.setMap(map);
Concernant la gestion des marqueurs, depuis la dernière version de Google Maps, il est nécessaire de les gérer soit même. Il faut donc garder une trace des marqueurs pour pouvoir les supprimer par la suite, si besoin. On stockera les marqueurs dans un tableau.
var markersArray = [];
On ajoute les marqueurs au tableau après le placement sur la carte.
markersArray.push(marker);
La fonction pour supprimer tous les marqueurs du tableau de la carte et nettoyer la carte est deleteOverlays().
Pour créer une OpenWindow:
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//Ajout d'un Listener sur le marqueur pour réagir en cas de clic
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
Obtenir votre clé d’API Google Maps
Aller sur https://code.google.com/apis/console et se connecter avec son compte Google.
Cliquer sur Services dans le menu à gauche.
Activer le service Google Maps API v3.
Cliquer sur API Access dans le menu à gauche.
La clé est visible dans la page API Access, section Simple API Access, celle-ci est indiqué sous le nom de Key for browser apps.
Le code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Gare de France</title>
<script src="jquery.js"></script>
<script src="getdata.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=VOTRE_CLE&sensor=false">
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="gareTab">
<h1>Liste de Gares Françaises</h1>
<table><tr> <th>Nom de la gare</th> <th>Région</th> <th>Latitude</th> <th>Longitude</th> </tr></table>
</div>
</body>
</html>
Côté CSS, on aura:
html {
height: 100%
}
body {
height: 100%;
margin: 0;
padding: 0;
margin-left: 2em;
margin-top: 2em;
}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding-left: 5px;
padding-right: 5px;
}
#map_canvas {
display: inline-block;
position: absolute;
margin-top: 6em;
width: 50%;
height: 55%;
left: 45%
}
#gareTab {
position: absolute;
width: 60%;
margin-top: 6em;
}
Et enfin, passons au côté JavaScript proprement dit:
//Contient tous les marqueurs présents sur notre carte
var markersArray = [];
//On retient l'InfoWindow ouverte pour pouvoir la fermer au besoin
var openedInfoWindow;
//Nos données
var data = [
{
"Nom de la gare": "Amiens",
"Région": "Picardie",
"Latitude": "49.88993025",
"Longitude": "2.30981909"},
{
"Nom de la gare": "Lyon-Part-Dieu",
"Région": "Rhône-Alpes",
"Latitude": "45.76032897",
"Longitude": "4.86050906"},
{
"Nom de la gare": "Bas-Monistrol",
"Région": "Auvergne",
"Latitude": "45.29796638",
"Longitude": "4.13958253"},
{
"Nom de la gare": "Strasbourg",
"Région": "Alsace",
"Latitude": "48.58496713",
"Longitude": "7.734584"},
{ "Nom de la gare": "Quiberon",
"Région": "Bretagne",
"Latitude": "47.48552763",
"Longitude": "-3.11816733"},
{
"Nom de la gare": "Carcassonne",
"Région": "Languedoc-Roussillon",
"Latitude": "43.21816508",
"Longitude": "2.35242959"}
];
//Suppression des marqueurs Google Maps
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
//Suppression du contenu du tableau de gare
function deleteTab() {
for(var i = 0; i < $('.ligne').length; ++i) {
$('.ligne').remove();
}
}
//S'exécute lorsque le document est prêt
function readyFn() {
//Initialisation de la Google Maps
var mapOptions = {
center: new google.maps.LatLng(47, 2),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
//Suppression de tout ce qui pourrait préexister
deleteOverlays();
deleteTab();
var tab = [];//On construit le contenu du tableau HTML dans tab
data.forEach(function(element, index, array) {
//Construction d'une ligne du tableau
tab.push('<tr><td> ' +
element["Nom de la gare"] + ' </td><td>' +
element["Région"] + ' </td><td> ' +
element["Latitude"] + ' </td><td> ' +
element["Longitude"] + ' </td></tr>'
);
//Construction du marqueur Google Maps
var latlng = new google.maps.LatLng(element["Latitude"], element["Longitude"]);
var marker = new google.maps.Marker({
position: latlng,
title: element["Nom de la gare"]
});
marker.setMap(map);//Ajout du marqueur à la carte
markersArray.push(marker);
//Ajout d'une InfoWindow pour chaque marqueur
//Ce qui s'affichera:
var contentString = '<b>' + element["Nom de la gare"]
+ '</b><br />' + element["Région"]
+ '<br />Latitude: ' + element["Latitude"]
+ '<br />Longitude: ' + element["Longitude"];
//Création des fenêtres d'info (ou InfoWindow)
var infowindow = new google.maps.InfoWindow({
content: contentString
});
//Ajout d'un Listener sur le marqueur pour réagir en cas de clic
google.maps.event.addListener(marker, 'click', function() {
if(openedInfoWindow != undefined) {//Au cas où il n'y a pas d'info window à fermer
openedInfoWindow.close();
}
infowindow.open(map,marker);
openedInfoWindow = infowindow;
});
});
//concaténation du tableau en string et ajout dans la balise table
$('table').append(tab.join(''));
}
$(document).ready(readyFn);
Pour tout savoir sur l’API Google Maps, je vous conseille la doc de Google qui est très claire et détaillée:
https://developers.google.com/maps/documentation/javascript/tutorial
Pour le zip contenant les fichiers ci-dessus, c’est par ici:
GareOnGoogleMaps
Maj 25.03.2013: En fait, il n’est pas nécessaire de générer une clé d’API pour pouvoir utiliser la Google Maps. Il suffit simplement d’utiliser l’url suivante http://maps.googleapis.com/maps/api/js?&sensor=false correspondant à l’adresse utilisée dans cette exemple sans le paramètre key. Ajout du zip comprenant les sources.
Deux outils bien utiles pour réaliser des fichiers de tests. Mocha est framework de test écrit en Javascript et une bibliothèque d’assertion pour Node