GEO-AUTOCOMPLETION
Article créé le : 04/02/2010
Présentation
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 :
- Le géocodeur de l'API Google Maps version 3 : Google Maps JavaScript API V3 Services,
- l'API Google Static Maps version 2 : Static Maps V2 API Developer's Guide,
- JQuery Plugins/Autocomplete : JQuery Plugins/Autocomplete.
Pour réaliser la géo-autocomplétion, les 4 fichiers suivants vous seront nécessaires :
Obtenir une liste d'emplacements possibles grâce à l'autocompletion
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 + '
';
}
Création de vignettes sous forme de cartes statiques pour visualiser les emplacements possibles
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
}
}
geometry.viewport représente le viewport recommandé pour chaque résultat renvoyé, à partir duquel nous pouvons tirer le nécessaire Static Maps URL, comme suit:
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 :
- attendre que la frappe de touches cesse afin d'envoyer une requête de géocodage,
- un nombre minimal de caractères doit être frappé,
- la mise en cache des réponses issues du géocodage afin d'éviter les requêtes multiples.
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.
Carte avec Géo-Autocomplétion
Emplacement : (Auto-complétion)
Saisissez une adresse, le nom d'une ville, d'un département , d'une région, ou d'un pays dans le champ ci-dessus.
Automatiquement, une liste de suggestion va apparaître sous forme de mini-cartes.
Cliquez sur celle correspondant à votre choix.
Automatiquement, une liste de suggestion va apparaître sous forme de mini-cartes.
Cliquez sur celle correspondant à votre choix.
Code Géo-Autocomplétion
Code : Géo-Autocomplétion Sans Google Ajax API Loader
- <?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: 'Insérez_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>
Remarque(s)
Autres articles :
- Api Google Maps - Geocodeur - Warning file_get_contents() curl() file() quotas sur les requêtes http et erreur 620 et 404
- Api Google Maps - Geocodeur - Les conditions d'utilisation du géocodeur de Google Maps
- Api Google Maps - Geocodeur - Code statut requête - GGeoStatusCode
- Api Google Maps - Geocodeur - Degré de précision du résultat d'une requête de géocodage - accuracy - GGeoAddressAccuracy
Référence: Fast map re-location using Google Static Maps v2 + geocoder
Source : Géo-Autocomplete
