La présentation se fera à travers un exemple simple :
1. Au niveau serveur PHP, un programme consulte l'api google maps en soumettant une requête http de type :
à cette requête google retourne un tableau JSON dont le contenu est structuré comme suit :http://maps.googleapis.com/maps/api/geo ... ddress=UNE ADRESSE RECHERCHEE&sensor=false
image obtenue sur le site: http://blog.ippon.fr/2012/04/04/google- ... t-le-rest/
Par exemple, si on exécute la requête http suivante qui recherche les coordonnées géo des sites de GOOGLE:
cela donne les données suivantes en retour:
Pour réussir un tel appel http en PHP au format json comme spécifié dans l'url google et sans format html (corps html), il faut tout simplement utiliser une fonction de lecture d'url (URL FOPEN) comme file_get_contents() ou fopen() ou utiliser la technique CURL. Cela peut s'écrire comme ça en PHP:{
"results" : [
{
"address_components" : [
{
"long_name" : "Google Inc",
"short_name" : "Google Inc",
"types" : [ "point_of_interest", "establishment" ]
},
{
"long_name" : "110",
"short_name" : "110",
"types" : [ "street_number" ]
},
{
"long_name" : "Willits St",
"short_name" : "Willits St",
"types" : [ "route" ]
},
{
"long_name" : "Birmingham",
"short_name" : "Birmingham",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Oakland",
"short_name" : "Oakland",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Michigan",
"short_name" : "MI",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "United States",
"short_name" : "US",
"types" : [ "country", "political" ]
},
{
"long_name" : "48009",
"short_name" : "48009",
"types" : [ "postal_code" ]
},
{
"long_name" : "3313",
"short_name" : "3313",
"types" : []
}
],
"formatted_address" : "Google Inc, 110 Willits St, Birmingham, MI 48009, USA",
"geometry" : {
"location" : {
"lat" : 42.5476590,
"lng" : -83.2161610
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 42.55587870,
"lng" : -83.20015359999999
},
"southwest" : {
"lat" : 42.53943820,
"lng" : -83.23216839999999
}
}
},
"types" : [ "point_of_interest", "establishment" ]
},
{
"address_components" : [
{
"long_name" : "Google",
"short_name" : "Google",
"types" : [ "establishment" ]
},
{
"long_name" : "Hitech City",
"short_name" : "Hitech City",
"types" : [ "sublocality", "political" ]
},
{
"long_name" : "Hyderabad",
"short_name" : "Hyderabad",
"types" : [ "locality", "political" ]
},
{
"long_name" : "Ranga Reddy",
"short_name" : "R.R. District",
"types" : [ "administrative_area_level_2", "political" ]
},
{
"long_name" : "Andhra Pradesh",
"short_name" : "Andhra Pradesh",
"types" : [ "administrative_area_level_1", "political" ]
},
{
"long_name" : "India",
"short_name" : "IN",
"types" : [ "country", "political" ]
}
],
"formatted_address" : "Google, Hitech City, Hyderabad, Andhra Pradesh, India",
"geometry" : {
"bounds" : {
"northeast" : {
"lat" : 17.4482340,
"lng" : 78.37751639999999
},
"southwest" : {
"lat" : 17.4475430,
"lng" : 78.37686730
}
},
"location" : {
"lat" : 17.44792160,
"lng" : 78.3772010
},
"location_type" : "APPROXIMATE",
"viewport" : {
"northeast" : {
"lat" : 17.44923748029150,
"lng" : 78.37854083029151
},
"southwest" : {
"lat" : 17.44653951970850,
"lng" : 78.37584286970849
}
}
},
"types" : [ "establishment" ]
}
],
"status" : "OK"
}
Page : geocoder.google.serveur.php
<?php
# entrer une adresse à chercher avec google maps
$adresse = isset($_GET['adresse'])?$_GET['adresse']:'google';
# démarrer google maps et afficher le tableau json contenant les données de géolocalisation de l'adresse
$url = sprintf("http://maps.googleapis.com/maps/api/geocode/json?address=%s&sensor=false", htmlentities(urlencode($adresse)));
echo (file_get_contents($url));
?>Pour récupérer les données retournées par le service google maps et les exploiter on peut utiliser une procédure AJAX qui peut réaliser l'appel du serveur php et utiliser json pour accéder aux données et les utiliser.
Dans la suite de cet exemple, je vais montrer comme réaliser cet appel Ajax et exploiter les données retournée par google maps pour afficher la carte google maps de l'adresse recherchée ainsi que la vue de caméra streetViewer du lieu positionné.
Pour cela on va coder dans une page HTML qu'on va nommer : geocoder.google.ajax.htm qui contiendra les zones suivantes:
- 1. une zone de texte (input) pour saisir l'adresse recherchée
2. un bouton qui va déclencher l'appel Ajax du programme PHP précédent : geocoder.google.serveur.php en lui passant le paramètre adresse saisie
3. la procédure Ajax va donc récupérer les résultats de géolocalisation et les afficher dans un DIV pour information, ensuite, elle remplira une liste déroulante avec les adresses complètes trouvées par google maps.
4. quand un choisira une adresse dans la liste remplie dans l'étape 3, une procédure javascript utilisant l'api google maps Geocoder permettant de tracer une carte google du lieu correspondant à l'adresse choisie avec un marqueur central, une bulle d'information du lieu et une vue caméra du streetViewer du lieu trouvé. La carte et le streetviewer seront logés dans deux DIV prévus pour ça.
<html>
<head>
<title>Application Google Maps</title>
<!-- Cette page utilise JQUERY -->
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
/* programme de démarrage */
/* gestion des événments de l'interface utilisateur */
$('#adresse').keydown(function(event) {
/* entrée dans la zone d'adresse */
if(event.which==13){getGoogleAddress(event);}
});
/* click sur bouton de recherche adresse */
$('#btn_chercher_adresse').click(getGoogleAddress);
/* changement de la liste des adresses */
$('#liste_adresses').change(loadGoogleMaps);
});
/* recherche des données de géolocalisation d'une adresse donnée */
function getGoogleAddress(event){
//init zones de travail
$('#result').html(''); $('#liste_adresses').get(0).options.length=0;
//ajax: recevoir les données de géolocalisation de l'adresse recherchée à partir du serveur PHP
$.get('geocoder.google.serveur.php', {adresse:$('#adresse').val()}, function(data){
/* data : tableau json contenant la réponse du serveur PHP */
/* sa stucture est : {status: texte de l'état d'erreur, results: tableau contenant les données de géolocation} */
if (data.status != 'OK'){
alert(data.status);
} else {
/* récupérer les données de géolocation du tableau data.results dont la structure d'une ligne est la suivante : */
/* . address_components: { types, long_name} => liste de propriétés contenant : route, locality, administrative_area_level_2, administrative_area_level_1 , country, postal_code */
/* . Formatted address => adresse complète */
/* . Type address => le type d'adresse exemple : route */
/* . Partial Match => true/false */
/* . Location Type => type de la position de l'adresse exemple : GEOMETRIC_CENTER */
/* . Location Lat => latitude géo */
/* . Location Lng => longitude géo */
/* . Bounds NorthEast => lat/lng Nord-est du cadre de la carte */
/* . Bounds SouthWest => lat/lng Sud-ouest du cadre de la carte */
/* . Viewport NorthEast => lat/lng Nord-est du cadre visible */
/* . Viewport SouthWest => lat/lng Sud-ouest du cadre visible */
var result = '<pre>';
for(var i in data.results){
result += ('\n------------------------------------------\nAddress Components n°'+(parseInt(i)+1)+' :\n------------------------------------------\n');
var element = data.results[i].address_components;
for(var j in element){
result += (element[j].types[0] + ' : ' + element[j].long_name+'\n');
}
result += ('Formatted address : ' + data.results[i].formatted_address+'\n');
//ajouter l'adresse complète trouvée dans la liste des adresses
var lastIndex = $('#liste_adresses').get(0).options.length;
$('#liste_adresses').get(0).options[lastIndex] = new Option(data.results[i].formatted_address, data.results[i].formatted_address, false, false);
//enregistrer les données latitude/longitude de géolocalisation de l'adresse pour les réutiliser plustard dans google maps et streetviewer
$($('#liste_adresses').get(0).options[lastIndex] ).data('lat',data.results[i].geometry.location.lat);
$($('#liste_adresses').get(0).options[lastIndex] ).data('lng',data.results[i].geometry.location.lng);
//
result += ('Type address : ' + data.results[i].types[0]+'\n');
result += ('Partial Match : ' + data.results[i].partial_match+'\n');
result += ('Location Type : ' + data.results[i].geometry.location_type+'\n');
result += ('Location Lat : ' + data.results[i].geometry.location.lat+'\n');
result += ('Location Lng : ' + data.results[i].geometry.location.lng+'\n');
if (data.results[i].geometry.bounds){
result += ('\n---------------------\nBounds NorthEast :\n---------------------\n');
result += ('Lat : ' + data.results[i].geometry.bounds.northeast.lat+'\n');
result += ('Lng : ' + data.results[i].geometry.bounds.northeast.lng+'\n');
result += ('\n---------------------\nBounds SouthWest :\n---------------------\n');
result += ('Lat : ' + data.results[i].geometry.bounds.southwest.lat+'\n');
result += ('Lng : ' + data.results[i].geometry.bounds.southwest.lng+'\n');
}
if (data.results[i].geometry.viewport){
result += ('\n---------------------\nViewport NorthEast :\n---------------------\n');
result += ('Lat : ' + data.results[i].geometry.viewport.northeast.lat+'\n');
result += ('Lng : ' + data.results[i].geometry.viewport.northeast.lng+'\n');
result += ('\n---------------------\nViewport SouthWest :\n---------------------\n');
result += ('Lat : ' + data.results[i].geometry.viewport.southwest.lat+'\n');
result += ('Lng : ' + data.results[i].geometry.viewport.southwest.lng+'\n');
}
}
result += '</pre>';
//afficher les données dans le div result
$('#result').html(result);
//déclencher une mise à jour de la liste des adresses
$('#liste_adresses').change();
}
},'json');
}
</script>
<!-- Le code suivant provient avec quelques adaptations du site : applications-google-maps.com/appli-GM-introduction.php -->
<!-- il exige l'accès aux apis de google maps en utilisant une clé (key) que vous devez obtenir avec votre compte GMAIL -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAFw0lDRKsdCra15LPvIxvehS3Kl_ZRrzIrsFqDz8GBXIeW1O52xQh3P31Xg2eTvqFRAyuOMY4dQrRQw" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* affichage de la carte google maps ainsi que la caméra du streetviewer */
function loadGoogleMaps() {
// l'adresse provenant de la liste des adresses nécessaire pour afficher google maps
var adresse = $('#liste_adresses option:selected').val();
//latitude et longitude nécessaires pour la caméra du streeviewer
var lat = $('#liste_adresses option:selected').data('lat');
var lng = $('#liste_adresses option:selected').data('lng');
//vidage des div map et streetviewer
$('#map').html('');$('#streetViewer').html('');
//
if (GBrowserIsCompatible()){
///////////////////
/* GOOGLE MAPS */
//////////////////
//objet google maps pointant sur le div map
var map = new GMap2(document.getElementById("map"));
// Recherche des coordonnées google maps de l'adresse
var geocoder = new google.maps.ClientGeocoder();
geocoder.getLatLng(adresse, function (coord){
// centrage de la map sur les coordonnées renvoyées par Google maps
map.setCenter(coord, 15);
// Affichage du marker de position (déplaçable=true)
map.addOverlay(new GMarker(coord,{draggable: true}));
// Affichage de la bulle d'information de la position
map.openInfoWindowHtml(coord,adresse);
});
// ajout de la propriété d'affichage des boutons "type de carte" (3 boutons par défaut)
map.addControl(new GMapTypeControl());
// ajout de la propriété ajout d'un bouton "type de carte" (Relief)
map.addMapType(G_PHYSICAL_MAP);
// ajout de la propriété zoom à la carte "map"
map.addControl(new GSmallMapControl);
// ajout de la propriété de control du zoom à l'aide de la roulette de souris
map.enableScrollWheelZoom();
///////////////////
/* STREET VIEWER */
//////////////////
// Coordonnées de la caméra
var CoordCamera = new GLatLng(lat, lng);
// yaw : orientation de l'azimute de la caméra
// pitch : angle d'élévation de la caméra (un signe "-" indique que l'orientation verticale de la caméra est vers le haut)
OrientCamera = { yaw:315.0,pitch:-0};
panoramaOptions = { latlng:CoordCamera, pov:OrientCamera };
// Le résultat est envoyé vers le div "streetViewer"
MonPano = new GStreetviewPanorama(document.getElementById("streetViewer"), panoramaOptions);
// Retourne un message d'erreur dans certains cas où l'image n'a pas été résolue
GEvent.addListener(MonPano, "error", null);
}
}
//]]>
</script>
<!-- STYLES DE LA PAGE -->
<style>
.adresse{ width:100% }
.adresse input{ width:40%; }
#map{ width:100%; height:100%; }
#streetViewer{ width:100%; height:100%; }
#result{ width:100%; height:100%; }
</style>
</head>
<body>
<div class="adresse">
Adresse recherchée:<br/><input id="adresse" />
<select id="liste_adresses"><option></option></select>
<button id="btn_chercher_adresse">Maps</button>
</div>
<div id="map"></div>
<div id="streetViewer"></div>
<div id="result"></div>
</body>
</html>Bonne lecture
