English versionGOOGLE API - La recherche d'informations dans Google Maps (1/3)
L'API de Google Maps ne fournit pas de fonctions de recherche géographique à partir d'une adresse postale. Si l'on a pas la longitude et la latitude du point à représenter celà peut devenir fastidieux pour l'utilisateur de rechercher ces informations pour chacun des documents.
De plus, comme indiqué dans mon premier message d'introduction, l'utilisateur de Google Maps et Google Earth va utiliser l'interface principalement dans deux buts :
Se positionner sur Google Maps à partir d'une adresse postale
Pour se positionner sur Google Maps à partir d'une adresse postale, nous allons utiliser le service Web de localsearchmap. Ce seervice renvoie par défaut la syntaxe de zoom sur un point de l'API GoogleMaps en version 1. Malheureusement cette syntaxe n'est plus valide en version 2. Nous allons donc un peut personnaliser l'appel.
La syntaxe d'utilisation de ce service est :
http://www.localsearchmaps.com/geo/?street=rue&town=ville
&country=pays
On peut aussi ajouter un argument indiquant le nom de la fonction javascript à appeler pour zoomer sur les coordonnées renvoyées : &cb=maFonctionJavascript
Par exemple :
http://www.localsearchmaps.com/geo/
?street=rue+des+cosmonautes&town=palaiseau
&country=france&cb=mapZoom
renvoie comme résultat : mapZoom(46.624, 2.4622);
Création d'un formulaire de recherche
Pour permettre à l'utilisateur d'indiquer les coordonnées, il va falloir ajouter un formulaire de recherche permettant de spécifier la rue, la ville et le pays.
De plus, comme indiqué dans mon premier message d'introduction, l'utilisateur de Google Maps et Google Earth va utiliser l'interface principalement dans deux buts :
- Trouver les documents situés disponibles un emplacement
- Trouver où se situe un document
Se positionner sur Google Maps à partir d'une adresse postale
Pour se positionner sur Google Maps à partir d'une adresse postale, nous allons utiliser le service Web de localsearchmap. Ce seervice renvoie par défaut la syntaxe de zoom sur un point de l'API GoogleMaps en version 1. Malheureusement cette syntaxe n'est plus valide en version 2. Nous allons donc un peut personnaliser l'appel.
La syntaxe d'utilisation de ce service est :
http://www.localsearchmaps.com/geo/?street=rue&town=ville
&country=pays
On peut aussi ajouter un argument indiquant le nom de la fonction javascript à appeler pour zoomer sur les coordonnées renvoyées : &cb=maFonctionJavascript
Par exemple :
http://www.localsearchmaps.com/geo/
?street=rue+des+cosmonautes&town=palaiseau
&country=france&cb=mapZoom
renvoie comme résultat : mapZoom(46.624, 2.4622);
Nous allons devoir utiliser la carte pour zoomer dessus, la première chose à faire est donc de déclarer map comme variable globale dans le code javascript fourni pour afficher la carte Google Maps dans l'article précédent.
Création d'un formulaire de recherche
Pour permettre à l'utilisateur d'indiquer les coordonnées, il va falloir ajouter un formulaire de recherche permettant de spécifier la rue, la ville et le pays.
<FORM NAME="form">
<LABEL>Rue : </LABEL> <INPUT NAME="rue" SIZE=50 /><BR />
<LABEL>Ville : </LABEL> <INPUT NAME="ville" SIZE=50 /><BR />
<LABEL>Pays : </LABEL> <INPUT NAME="pays" />
<BUTTON VALUE="Rechercher" NAME="Rechercher" TYPE="button"
onclick="searchPoint()">
Rechercher
</BUTTON>
</FORM>
Déclaration de la fonction mapZoom(lat,long)
Fonction javascript permettent de zoomer sur la carte à partir de sa longitude et sa latitude
function mapZoom(lat, long,town,state,country){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}Déclaration de la fonction searchPoint()
Cette fonction va récupérer les informations saisies par l'utilisateur, formater le texte au format URL, lancer le service WEB à partir de ces informations puis lancer la fonction de zoom à partir du résultat.
function searchPoint() {
var queries = "?street=" + escape( document.form.rue.value)+
"&city="+escape( document.form.ville.value)+
"&country=" + escape( document.form.pays.value);
var s = document.createElement( "script" );
s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom";
s.type = "text/javascript";
document.getElementsByTagName( "head" )[0].appendChild(s);
}Code Source complet de la page
N'oubliez pas de remplacer la clé Google Maps.
Voir le résultat
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<base href="http://free.dominoserver.de/it/dominoweb.nsf/" target="_self" />
<script src="http://maps.google.com/maps?file=api&v=2&key=CleGoogleMaps"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
function load() {
function createMarker(point,title, desc ) {
var bulle = "<h3>" + title + "</h3><p>" + desc +"</p>";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.setCenter(point,14, G_HYBRID_MAP );
marker.openInfoWindowHtml(bulle);
});
return marker;
}
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude = parseFloat(markers[i].getAttribute("long"));
var title = markers[i].getAttribute("title");
var desc =
markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
var point = new GLatLng(latitude,longitude);
var marker = createMarker(point,title, desc);
map.addOverlay(marker);
}
});
}
}
function mapZoom(lat, long){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}
function searchPoint() {
var queries = "?street=" + escape( document.form.rue.value) +
"&city="+escape( document.form.ville.value) +
"&country=" + escape( document.form.pays.value);
var s = document.createElement( "script" );
s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom";
s.type = "text/javascript";
document.getElementsByTagName( "head" )[0].appendChild(s);
}
//]]>
</script>
<style>
LABEL {
DISPLAY: inline ;
FLOAT: left ;
WIDTH: 40px ;
font-size:10px;
font-weight: bold ;
margin-left: 5px ;}
INPUT {
font-family: Arial, Helvetica, sans-serif ;
font-size:10px; }
BUTTON {
font-size : 11px;
border : 1px solid #CCC;
background-color : #EEE;}
</style>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
<div>
<form name="form">
<LABEL>Rue :</LABEL> <input name="rue" size=50><br/>
<LABEL>Ville :</LABEL> <input name="ville" size=50><br/>
<LABEL>Pays :</LABEL> <input name="pays">
<BUTTON VALUE="Rechercher" NAME="Rechercher" TYPE="button"
onClick="searchPoint()" >
Rechercher
</BUTTON>
</form>
</div>
</body>
</html>
posté par Philippe GAUVIN le vendredi, juin 09, 2006
1 Commentaires:
Certes, en se mêlant des affaires d'autrui par là j'ai trouvé quelques utilités assez effrontées pour surveiller le positionnement de la compétence et pour voir s'ils(si elles) ont des blocs(trucages), etc.. Si vous avez une curiosité je vous conseille qu'il eheis un coup d'oeil. Ils(elles) sont apparemment gratuits: http://www.lineared.com/es/recuperar/fr-datos-posiciones-google-msn-yahoo.htm
Enregistrer un commentaire
Lien vers ce message:
Créer un lien
<< Home