API Google Maps Partie 2 : recherche de lieux
Publié le par Nous poursuivons notre série d’articles sur l’API Google Maps. Dans le précédent article, nous avons présenté l’API Geolocation, qui est une des nombreuses APIs apportées par le langage HTML5, au travers d’un exemple très simple qui consiste à placer un repère sur une carte Google Maps. Pour cette deuxième partie, nous allons reprendre cet exemple et allons l’étoffer un peu, en recherchant des lieux autour de votre position.
A boire et à manger
Reprenons l’exemple de l’article précédent tel qu’on l’avait laissé :
<!DOCTYPE html>
<html>
<head>
<title>Geolocation API test</title>
<meta charset="utf8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
margin: 0;
position: relative;
}
#maps {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
</style>
<script type="text/javascript">
var objLocation, objMaps, objCurrentLocationMarker, objInfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
objLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
objMaps = new google.maps.Map(document.querySelector("#maps"), {
zoom: 16,
center: objLocation,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
mapTypeId: google.maps.MapTypeId.ROADMAP
});
objCurrentLocationMarker = new google.maps.Marker({
position: objLocation,
map: objMaps,
title: "Vous êtes ici !"
});
google.maps.event.addListener(objCurrentLocationMarker, 'click', function() {
objInfoWindow.setContent("Vous êtes ici !");
objInfoWindow.open(objMaps, this);
});
objInfoWindow = new google.maps.InfoWindow();
}, function(msg) {
alert("Erreur : " + msg);
});
}
</script>
</head>
<body>
<div id="maps"></div>
</body>
</html>Nous allons donc enrichir cet exemple en ajoutant sur la carte de nouveaux repères qui correspondront aux bars et restaurants qui se trouveront autour de votre position.
En haut de notre script, nous allons commencer par rajouter une variable nommée objService, qui nous servira ici pour la recherche d’établissements :
var objLocation, objMaps, objCurrentLocationMarker, objInfoWindow, objService;Nous ajouterons ensuite le code suivant dans le bloc if juste après l’appel à new google.maps.InfoWindow() :
objService = new google.maps.places.PlacesService(objMaps);
google.maps.event.addListenerOnce(objMaps, 'bounds_changed', doSearch);
doSearch();En-dessous de notre bloc if, rajoutons la fonction suivante qui effectuera la recherche d’établissements :
function doSearch() {
objService.nearbySearch({
location: objLocation,
radius: 1000,
types: ['restaurant', 'bar']
}, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
});
}Dans ce morceau de code, nous faisons appel à la fonction nearbySearch(). Cette fonction permet de rechercher des lieux dans une zone géographique. Nous passons ici en paramètre, un objet contenant trois propriétés :
- location : la position de l’utilisateur;
- radius : le rayon de la zone de recherche en mètres. Ici, nous recherchons des lieux à un rayon de 1 kilomètre;
- types : les types de lieux que nous voulons récupérer. Ici, nous souhaitons récupérer tous les restaurants et bars.
En-dessous de la fonction doSearch(), une autre fonction qui crée un repère et qui l’ajoute sur la carte et qui, en-même temps, gère les clics sur ces mêmes repères :
function createMarker(objPlace) {
if (objPlace.types[0] !== "bar" && objPlace.types[0] !== "restaurant" &&
objPlace.types[0] !== "cafe") {
return;
}
var objMarker = new google.maps.Marker({
position: objPlace.geometry.location,
map: objMaps,
icon: "http://www.google.com/mapfiles/ms/micons/purple-dot.png",
title: objPlace.name
});
google.maps.event.addListener(objMarker, 'click', function() {
var strHTML = "<b>" + objPlace.name + "</b><br />";
if (objPlace.types[0] == "bar") {
strHTML += "Bistrot";
} else if (objPlace.types[0] == "cafe") {
strHTML += "Café";
} else if (objPlace.types[0] == "restaurant") {
strHTML += "Resto";
} else {
strHTML += "Inconnu (" + objPlace.types[0] + ")";
}
objInfoWindow.setContent(strHTML);
objInfoWindow.open(objMaps, this);
});
}Ouvrez la page dans votre navigateur. Une carte Google Maps s’affiche sur toute la page avec, au centre, un repère indiquant votre position, et tout autour, plusieurs repères correspondant aux lieux que nous avons récupéré via la fonction nearbySearch() :
L’addition !
Ce sera tout pour cet article. Nous avons vu comment récupérer des lieux autour du position géographique et les placer sur une carte Google Maps. Dans la troisième partie, nous allons encore enrichir cet exemple en y ajoutant un moyen d’afficher un itinéraire entre votre position et un lieu.