comment géolocaliser une adresse et la centrer avec WEBDEV (Google Maps v3) ?

Voici une petit code javascript qui s'utilise avec le code déjà publier dans le billet suivant "WEBDEV 15 - Google maps v3" .

Dans la collection de procédure : pGestionCartes ajouté la procédure suivante :

function RechercheCoordonneesDepuisAdresse(sAdresse, sNomFonction)

{

// On a récupéré le nom de la fonction sous forme de chaîne, donc on récupère maintenant le pointeur sur cette fonction

var objFonction = eval(sNomFonction);

//alert(objFonction);

var geo = new google.maps.Geocoder();

geo.geocode({'address': sAdresse},objFonction);

}

sNomfonction est une fonction WLangage navigateur local à la page par exemple. Voici un exemple de fonction :

function LocalRetourRecherche(res,stat) /

{

var coordonnee = null;

if (stat == google.maps.GeocoderStatus.OK){

gObjCarte.setCenter(res[0].geometry.location);

var coordonnee = res[0].geometry.location;

//Pour le debuguage de lappli

var marke = new google.maps.Marker({position: coordonnee, map: gObjCarte, title: "adress" });

}else {

alert("Geocode was not successful for the following reason: " + stat);

}

}

Les deux paramètres (res et stat) sont passés automatiquement par la méthode geo.geocode.

WEBDEV 15 - Google maps V3

Pour afficher une carte Google maps v3 dans un site WEBDEV, je me suis inspiré de l'exemple WW_Cartes de la LST 72.

Pour passer en v3 des APIs google maps, il faut bien évidement consulter la doc :

http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/introduction.html

A partir de cette introduction et de la doc des API (http://code.google.com/intl/fr-FR/apis/maps/documentation/javascript/reference.html) on peut commencer dans WEBDEV.

Dans l'onglet avancé de la description de la page mettre :

Dans cette page, mettre un champ libellé HTML et dans le code d'initialisation de ce dernier mettre le code suivant :

Ce code permet d'afficher la carte sur tous les navigateurs. Sans ce code sous chrome la carte prends tout le navigateur.

Ensuite dans le code Onload de la page mettre le code :

gObjCarte est un entier

CreerCarte("CARTE", 0,180)

La variable gObjCarte est utilisée dans plusieurs fonction de manipulation de la carte elle est donc déclarer en global navigateur.

Pour une facilité d’utilisation et de réutilisation création d’une collection de procédure dans les procédures globales navigateur

Nom de la collection : pGestionCartes

La procédure est écrite en javascript. Il faut donc cliquer sur WL après création de la procédure

Création de la carte :

// Résumé : Création de la carte google map

// Syntaxe :

//CreeCarte ()

//

// Paramètres :

// sNomChampCarte : Nom du champ HTML (..alias ou id défini dans DIV)

// nlat : latitude du centre de la carte

// nlong : longitude du centre de la carte

// Valeur de retour :

// Aucune

//

function CreerCarte(sNomChampCarte,nlat,nlong)

{

if (nlat==0){

nlat = 48.856558;

};

if (nlong==0){

nlong = 2.350966;

};

// Création de la carte

var latlng = new google.maps.LatLng(nlat, nlong);

var myOptions = {

mapTypeControl: true,zoom: 5, center: latlng, mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},navigationControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP

}

// création de la carte

gObjCarte = new google.maps.Map(document.getElementById(sNomChampCarte),myOptions);

}