Utiliser les fonctionnalités de géolocalisation

Cet exemple est propulsé par

Si vous avez déjà pris connaissance de pages précédentes de contenu sur les cartes GMaps vous avez du noter le positionnement des marqueurs par leurs coordonnées réelles (latitude et longitude).
Il est possible d'obtenir les coordonnées de n'importe quel endroit du globe terrestre à l'aide d'un localisateur GPS qui vous indiquera ces informations.

Cependant, tout le monde ne possède pas de localisateurs GPS, et plus loin que cela, il est impossible de connaître la position d'un endroit que l'on recherche.
C'est pour cela que la librairie GMaps offre la possibilité de rechercher un emplacement via une adresse littérale, postale telle que "3 avenue des champs Elysées Paris, France" (ndr : version fr de Webjax).

L'objectif de cette page est donc d'éclaircir l'utilisation de cette fonctionnalité de géolocalisation d'adresse postale via l'objet dédié à cette fonctionnalité dans la librairie GMaps à savoir GClientGeocoder .


#00 :: Géolocalisation d'adresse à partir de liens hypertextes

Géolocalisation d'adresse à partir de liens hypertextes

Ce premier exemple vous permet de déplacer la carte GMaps sur l'emplacement d'une adresse littérale précisée au sein de liens hypertextes.
Un champ de saisie texte non éditable permet de prendre connaissance de l'adresse à géolocalisée.

L'exemple est testable ci après :

Utilisation de l'exemple #00

ZONE DE CHARGEMENT DE LA CARTE GMAPS

Buffer Adresse :
la sorbonne Paris, France
Champ de Mars 75007 Paris, France
226 faubourg saint honoré Paris, France
quai jemmapes 75010 Paris, France
barbes 75017 Paris France
rue blondel 75009 Paris France
rue saint-lazare 75009 Paris
avenue des champs élysées 75008 Paris

Le code source de l'exemple est recopié ci après avec dans l'ordre :

• le code Javascript permettant de localiser l'adresse cliquée à l'aide du client GClientGeocoder.
• le code HTML des liens hypertextes permettant de lancer une recherche directe "onclick" de l'adresse voulue.

var map; var geocoder; /* initialisation de la GMaps et du client Geocoder */ map = new GMap2(document.getElementById("map_0")); map.disableDragging(); map.addControl(new GMapTypeControl()); var center = new GLatLng(48.856558, 2.350966); map.setCenter(center, 15); geocoder = new GClientGeocoder(); // fonction traite un retour http contenant soit // un retour d'erreur adresse non trouvée soit // un retour succès avec les coordonnées et détails // de l'adresse recherchée // la fonction ajoute un marqueur et une fenêtre d'informations // html function ajouterAdresseSurCarte (response) { map.clearOverlays(); if (!response || response.Status.code != 200) { alert("Impossible de localiser l'adresse recherchée."); } else { place = response.Placemark[0]; point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(place.address + '<br>' + '<strong>Code Pays :</strong> ' + place.AddressDetails.Country.CountryNameCode); } } // fonction permettant de valoriser le champ buffer adresse // méthode qui lance la recherche avec le client geocoder // et qui définit la méthode ajouterAdresseSurCarte() // pour traiter la réponse des serveurs Google Geocoding function trouverAdresse(address) { $('bufferAdresse').value = address; geocoder.getLocations(address, ajouterAdresseSurCarte); }
Le code HTML des liens hypertextes d'appels :
<!-- champ buffer d'adresse recherchée --> Buffer Adresse : <input type="text" id="bufferAdresse" value="" readonly /> <br/> <!-- liens hypertextes de test --> <a href="javascript:void(0)" onclick="trouverAdresse('la sorbonne Paris, France');return false;">la sorbonne Paris, France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('Champ de Mars 75007 Paris, France');return false;">Champ de Mars 75007 Paris, France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('226 faubourg saint honoré Paris, France');return false;">226 faubourg saint honoré Paris, France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('quai jemmapes 75010 Paris, France');return false;">quai jemmapes 75010 Paris, France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('barbes 75017 Paris France');return false;">barbes 75017 Paris France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('rue blondel 75009 Paris France');return false;">rue blondel 75009 Paris France</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('rue saint-lazare 75009 Paris');return false;">rue saint-lazare 75009 Paris</a><br /> <a href="javascript:void(0)" onclick="trouverAdresse('avenue des champs élysées 75008 Paris');return false;"> avenue des champs élysées 75008 Paris</a>

: 30/01/2007 15:55:21 | : Google, Maps, GMaps, GClientGeocoder, getLocations, Placemark, recherche, par, adresse, marker, xml, cartes, cartographie, géolocalisation, marqueurs,

Aucun commentaire enregistré