Geocodeur
Géo-autocomplétion avec l'API Google Maps version 3 et l'API Google Static Maps version 2.
Attention :
L'API Google Maps Javascript Version 2 a été officiellement déclarée obsolète le 19 mai 2010 par Google. Elle continuera, cependant, à fonctionner durant encore trois ans, à compter de cette date, conformément à la politique de dépréciation de Google.
TouraineVerte.com ne diffusera plus de d'exemples ni de tutoriels sur cette version de l'API.
L'API Google Maps Javascript Version 3 est désormais la version officielle.
La Géo-autocomplétion permet de suggérer des réponses, sous la forme de mini-cartes accompagnées d'un descriptif succinct, au fur et à mesure que vous saisissez une adresse postale dans un champ de recherche.
La Géo-autocomplétion utilise :
Pour réaliser la géo-autocomplétion, les 4 fichiers suivants vous seront nécessaires :
A l'aide du service de géocodage de l'API Google Maps Version 3, nous allons créer la liste des emplacements géographiques correspondant à la saisie (complète ou partielle) effectuée dans le champ d'un formulaire.
var partial_location = document.getElementById("location").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': partial_location}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
document.getElementById("results").innerHTML = '';
for (var i = 0; i < results.length; i++) {
showResult(results[i]);
}
} else {
document.getElementById("results").innerHTML = 'Le géocodage a échoué pour la raison suivante : ' + status;
}
});
function showResult(result) {
document.getElementById("results").innerHTML += 'Il peut s'agir de : ' + result.formatted_address + '
';
}
Lors du géocodage la réponse obtenue est un objet JSON ayant la forme suivante :
results[]: {
types[]: google.maps.GeocoderLocationType,
formatted_address: String,
address_components[]: {
short_name: String,
long_name: String,
types[]: String
},
geometry: {
location: LatLng,
location_type: String,
viewport: LatLngBounds,
bounds: LatLngBounds
}
}
function showResult(result) {
var src = 'http://maps.google.com/maps/api/staticmap';
src += '?visible=' + result.geometry.viewport.getSouthWest().toUrlValue() + '|' + result.geometry.viewport.getNorthEast().toUrlValue();
/*
Pour les autre paramètres concernant les cartes statiques consultez :
http://code.google.com/apis/maps/documentation/staticmaps/#URL_Parameters
*/
src += '&size=100x100&maptype=terrain&key=YOUR_API_KEY&sensor=false';
document.getElementById("results").innerHTML += '<img src="' + src + '" /> ' + result.formatted_address + '<br/>';
}
La création d'une carte statique s'est aujourd'hui considérablement simplifiée grâce à la version 2 de l'API Static Maps.
En effet, il n'est plus nécessaire de calculer manuellement un niveau de zoom ainsi que la latitude et la longitude.
L'utilisation de ce plugin d'autocomplétion est recommandé, car il comporte un certain nombre de caractéristiques destinées à protéger le service de géocodage de Google contre les sollicitations abusives.
Sont inclus :
Des options sont également disponibles pour définir la taille et le type des cartes statiques insérées dans les vignettes : http://code.google.com/apis/maps/documentation/staticmaps/#URL_Parameters.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TouraineVerte.com : jQuery geo_Autocomplete Plugin</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://geo-autocomplete.googlecode.com/svn/trunk/lib/jquery.autocomplete_geomod.js"></script>
<script type="text/javascript" src="http://geo-autocomplete.googlecode.com/svn/trunk/geo_autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="http://geo-autocomplete.googlecode.com/svn/trunk/lib/jquery.autocomplete.css" />
<script type="text/javascript">
$().ready(function() {
var latlng = new google.maps.LatLng(47.249713,0.291116);
var optionsCarte = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var maCarte = new google.maps.Map(document.getElementById("EmplacementDeMaCarte"), optionsCarte);
/* Toutes les options d'autocompétion JQuery sont documentées ici : http://docs.jquery.com/Plugins/Autocomplete */
/* Options supplémentatires pour geo_autocomplete : */
/* mapkey : 'ABQIAAAATndsWAV5Q2y7pRRi-22W_hTxw9fvAnrsiYejTsRxd4b0cj9HKxSNCXUxAANaoACDzXWznNLVPto_jX' - La clé API est indispensable pour obtenir les mini-cartes : http://code.google.com/apis/maps/signup.html */
/* mapwidth : 100 */
/* mapheight : 100 */
/* maptype : 'terrain' - Voir pour modifier le type de mini-carte : http://code.google.com/apis/maps/documentation/staticmaps/#MapTypes */
/* mapsensor : true or false */
$('#location').geo_autocomplete(new google.maps.Geocoder, {
mapkey: 'Inserez_Votre_Clef_API_Ici',
selectFirst: false,
minChars: 3,
cacheLength: 50,
width: 300,
scroll: true,
scrollHeight: 330
}).result(function(_event, _data) {
if (_data) maCarte.fitBounds(_data.geometry.viewport);
});
});
</script>
<style>
.ac_results li img {
float: left;
margin-right: 5px;
}
.cadre{
margin:1em 0;
padding:1em 0;
height:auto;
border:1px solid #513a0b;
text-align:center;
background-color:#e7e3d7;
}
</style>
</head>
<body>
<div class="cadre">Saisissez une adresse, le nom d'une ville, d'un département , d'une région, d'un pays ou d'un contient dans le champ ci-dessous.<br /> Automatiquement, <em>une liste de suggestion va apparaître sous forme de mini-cartes</em>.<br />Cliquez sur celle correspondant à votre choix.</div>
<div><input type="text" id="location" style="width:100%" /></div>
<br/>
<div id="EmplacementDeMaCarte" style="width:100%;height:350px;"></div>
</body>
</html>
Référence: Fast map re-location using Google Static Maps v2 + geocoder
Source : Géo-Autocomplete
