Api Google Maps
Articles
GÉOLOCALISATION DE LIEUX TOURISTIQUES
A PARTIR D'UNE ADRESSE POSTALE
UTILISATION DE PHP 5 - XML - MYSQL - GOOGLE MAPS

GÉOLOCALISATION DE LIEUX TOURISTIQUES
A PARTIR D'UNE ADRESSE POSTALE
UTILISATION DE PHP 5 - XML - MYSQL - GOOGLE MAPS

Présentation

Grâce à ce tutoriel, vous allez créer votre propre base de données, et permettre à vos visiteurs de visualiser sur une carte, tous les lieux touristiques situés dans un rayon défini par rapport à l'adresse postale saisie.

Ce tutoriel comporte douze sections :

• Création des tables MySQL,
• Insertion des données,
• Construction de la requête SQL,
• Paramètres de connexion à la base de données,
• Générer un fichier XML à l'aide de PHP 5,
• Vérification du fichier XML généré par xml.php,
• Création de la carte,
• Géocodeur et Recheche à proximité,
• Création des marqueurs et de la liste latérale,
• Résultat final,
• Que faire désormais ?.
• Comment enregistrer un fichier au format UTF-8 ?.

Arborescence des fichiers

Création de la table 'marqueurs'

Lorsque vous créez vos tables MySQL, faites tout particulièrement attention aux attributs "lat" ( latitude ) et "lng" ( longitude ). En raison des capacités de zoom actuellement offertes par Google Maps, une précision de 6 chiffres après la virgule est largement suffisante.

Afin de minimiser l'espace de stockage nécessaire à votre table, vous pouvez attribuer à "lat" et "lng" le type float(10,6). Cela vous permettra de stocker un nombre comportant 4 chiffres avant la virgule (signe + ou - compris), suivi de 6 chiffres après la virgule.

Exemple : -123.456789 Degrés.

Votre table doit également comporter un attribut "id" servant de clé primaire.

Pour géocoder vos adresses postales vous pouvez utiliser ce tutoriel de Google Maps.

Consultez, également, la liste de géocodeurs située à cette adresse :

http://groups.google.com/group/google-maps-api/web/resources-non-google-geocoders.

Si vous préférez créer votre base de données à partir de phpMyAdmin, voici une capture d'écran prise lors de la création de la table

Si vous ne disposez pas de phpMyAdmin, ou que vous préfériez utiliser les commandes SQL, voici les instruction SQL permettant la création de la table creation_table.sql :

Code : Création de la table "marqueurs"

  CREATE TABLE IF NOT EXISTS `marqueurs` (

	`id` int(11) NOT NULL auto_increment,

	`nom` varchar(100) collate utf8_unicode_ci NOT NULL,

	`adresse` varchar(150) collate utf8_unicode_ci NOT NULL,

	`codepostal` float(5,0) NOT NULL,

	`ville` varchar(255) collate utf8_unicode_ci NOT NULL,

	`lat` float(10,6) NOT NULL,

	`lng` float(10,6) NOT NULL,

	`url` varchar(255) collate utf8_unicode_ci NOT NULL,

	PRIMARY KEY  (`id`)

  ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1 ;

Insertion des données

Une fois la table créée, il nous faut maintenant la remplir. L'échantillon de données, fourni ci-dessous, cible des sites touristiques situés en Touraine.

Dans phpMyAdmin, vous pouvez utiliser l'onglet Importer pour importer des données dans divers formats, y compris le format CSV.

Open Office (Gratuit), Microsoft Excel et Google Spreadsheets (Gratuit) vous permettent de transférer facilement des données provenant de feuilles de calcul vers des tables MySQL par importation / exportation de fichiers CSV.

Voici un échantillon de données au format CSV. data.csv :

Code : Données à insérer dans la table "marqueurs" - Format CSV

  "1";"Château Royal d'Amboise";"BP 371  F";"37403";"Amboise Cedex";"47.413147";"0.985165";"http://www.chateau-amboise.com/"

  "2";"Château de Chenonceau";;"37150";"Chenonceaux";"47.328789";"1.067262";"http://www.chenonceau.com/"

  "3";"Le domaine national de Chambord";;"41250";"Chambord";"47.615971";"1.517143";"http://www.chambord.org/"

  "4";"Forteresse royale de Chinon";;"37500";"Chinon ";"47.168186";"0.235713";"http://www.forteresse-chinon.fr/"

  "5";"Château d'Azay-le-Rideau";"rue de Pineau";"37190";"Azay-le-Rideau France";"47.259647";"0.467434";"http://azay-le-rideau.monument"

  "6";"Château de Cheverny";"1, avenue Château";"41700";"Cheverny";"47.500099";"1.458328";"http://www.chateau-cheverny.fr/"

  "7";"Château de Villandry";;"37510";"Villandry ";"47.341003";"0.514383";"http://www.chateauvillandry.com/"

  "8";"Château de Langeais";;"37130";"Langeais ";"47.324844";"0.406151";"http://www.chateau-de-langeais.com/"

  "9";"Château du Clos Lucé";"2, rue Clos Lucé";"37400";"Amboise";"47.409302";"0.992761";"http://www.closluce.com/"

  "10";"Château de Montsoreau";;"49730";"Montsoreau ";"47.215729";"0.062388";"www.chateau-montsoreau.com/"

  "11";"Château de Gizeux";;"37340";"Gizeux";"47.390766";"0.205543";"http://www.chateaudegizeux.com/"

  "12";"Château de Loches";"5, place Charles VII";"37600";"Loches";"47.127644";"0.998876";

  "13";"Château de Saché";"rue du Château";"37190";"Saché";"47.245773";"0.544521";

  "14";"Musée de l'hôtel Goüin";"25, rue du Commerce";"37000";"Tours";"47.395374";"0.684709";"http://www.musee-gouin.fr/"

  "15";"Prieuré de Saint-Cosmes";"rue Ronsard";"37520";"La Riche";"47.389557";"0.651079";"http://www.prieure-ronsard.fr"

  "16";"Château de Candé";;"37260";"Monts";"47.296871";"0.664276";"http://www.monuments-touraine.fr/page.php?id_noeud=106"

  "17";"Maison de la Devinière";;"37500";"Seuilly";"47.140430";"0.179225";"http://www.monuments-touraine.fr/page.php?id_noeud=103"

  "18";"Château du Grand Pressigny - Musée de la préhistoire";;"37350";"Le Grand-Pressigny";"46.921707";"0.803343";"http://www.monuments-touraine.fr/page.php?id_noeud=105&id_art=19"

  "19";"Parc de Richelieu";"5, place du Cardinal";"37120";"Richelieu";"47.007153";"0.325985";"http://www.monuments-touraine.fr/page.php?id_noeud=108&id_art=58"

  "20";"Le donjon de Loches";;"37600";"Loches";"47.124760";"0.996709";

  "21";"Tour Saint-Antoine";"rue Saint Antoine";"37600";"Loches";"47.129082";"0.998672";

  "22";"Abbaye de Beaulieu-lès-Loches";;"37600";" Beaulieu-lès-Loches";"47.128548";"1.012330";

  "23";"Château de Tours";;"37000";"Tours";"47.397060";"0.693689";

  "24";"Cathédrale Saint-Gatien";"rue Lavoisier";"37000";"Tours";"47.395615";"0.694461";

  "25";"Musée du compagnonage";"8, rue Nationale";"37000";"Tours";"47.396126";"0.686796";"http://www.musee-du-compagnonnage.info/"

  "26";"Musée du Gemmail";"7, rue du Mûrier";"37000";"Tours";"47.395016";"0.680852";"http://www.gemmail.com/"

  "27";"Pagode de Chanteloup";"BP 317";"37403";"Amboise Cedex";"47.391102";"0.970080";"http://www.pagode-chanteloup.com/"

  "28";"Abbaye de Fontevraud";;"49590";"Fontevraud-l'Abbaye";"47.181545";"0.051670";"http://www.abbaye-fontevraud.com/"

  "29";"Château de Luynes";;"37230";"Luynes";"47.386387";"0.553479";

  "30";"Château d'Ussé";;"37420";"Rigny-Ussé";"47.249866";"0.291363";"http://www.chateaudusse.fr/"

  "31";"Aqueduc Gallo Romain Luynes";;"37230";"Luynes";"47.397434";"0.568457";

  "32";"Chartreuse du Liget";;"37460";"Chemillé-sur-Indrois";"47.143856";"1.129981";

  "33";"Château de Montrésor";;"37460";"Montrésor";"47.155720";"1.201158";

  "34";"Château de Montpoupon";;"37460";"Céré-la-Ronde";"47.252983";"1.141881";"http://www.montpoupon.com/"

  "35";"Château d'Azay le Ferron";"rue Hersent Luzarche";"36290";"Azay-le-Ferron";"46.850567";"1.069622";"http://www.chateau-azay-le-ferron.com/"

Ci-dessous, une capture d'écran des options d'importation de phpMyAdmin utilisées pour insérer le fichier CSV dans la table.

Si vous ne souhaitez pas utiliser l'interface de phpMyAdmin, voici un extrait de la requête SQL permettant d'arriver au même résultat. requete_sql_phpmyadmin.sql :

Code : Données à insérer dans la table "marqueurs" - Requête SQL

--

-- Contenu de la table `marqueurs`

--



INSERT INTO `marqueurs` (`id`, `nom`, `adresse`, `codepostal`, `ville`, `lat`, `lng`, `url`) VALUES

  (1, 'Château Royal d''Amboise', 'BP 371  F', 37403, 'Amboise Cedex', 47.413147, 0.985165, 'http://www.chateau-amboise.com/'),

  (2, 'Château de Chenonceau', '', 37150, 'Chenonceaux', 47.328789, 1.067262, 'http://www.chenonceau.com/'),

  (3, 'Le domaine national de Chambord', '', 41250, 'Chambord', 47.615971, 1.517143, 'http://www.chambord.org/'),

  (4, 'Forteresse royale de Chinon', '', 37500, 'Chinon ', 47.168186, 0.235713, 'http://www.forteresse-chinon.fr/'),

  (5, 'Château d''Azay-le-Rideau', 'rue de Pineau', 37190, 'Azay-le-Rideau France', 47.259647, 0.467434, 'http://azay-le-rideau.monument'),

  (6, 'Château de Cheverny', '1, avenue Château', 41700, 'Cheverny', 47.500099, 1.458328, 'http://www.chateau-cheverny.fr/'),

  (7, 'Château de Villandry', '', 37510, 'Villandry ', 47.341003, 0.514383, 'http://www.chateauvillandry.com/'),

  (8, 'Château de Langeais', '', 37130, 'Langeais ', 47.324844, 0.406151, 'http://www.chateau-de-langeais.com/'),

  (9, 'Château du Clos Lucé', '2, rue Clos Lucé', 37400, 'Amboise', 47.409302, 0.992761, 'http://www.closluce.com/'),

  (10, 'Château de Montsoreau', '', 49730, 'Montsoreau ', 47.215729, 0.062388, 'www.chateau-montsoreau.com/'),

  (11, 'Château de Gizeux', '', 37340, 'Gizeux', 47.390766, 0.205543, 'http://www.chateaudegizeux.com/'),

  (12, 'Château de Loches', '5, place Charles VII', 37600, 'Loches', 47.127644, 0.998876, ''),

  (13, 'Château de Saché', 'rue du Château', 37190, 'Saché', 47.245773, 0.544521, ''),

  (14, 'Musée de l''hôtel Goüin', '25, rue du Commerce', 37000, 'Tours', 47.395374, 0.684709, 'http://www.musee-gouin.fr/'),

  (15, 'Prieuré de Saint-Cosmes', 'rue Ronsard', 37520, 'La Riche', 47.389557, 0.651079, 'http://www.prieure-ronsard.fr'),

  (16, 'Château de Candé', '', 37260, 'Monts', 47.296871, 0.664276, 'http://www.monuments-touraine.fr/page.php?id_noeud=106'),

  (17, 'Maison de la Devinière', '', 37500, 'Seuilly', 47.140430, 0.179225, 'http://www.monuments-touraine.fr/page.php?id_noeud=103'),

  (18, 'Château du Grand Pressigny - Musée de la préhistoire', '', 37350, 'Le Grand-Pressigny', 46.921707, 0.803343, 'http://www.monuments-touraine.fr/page.php?id_noeud=105&id_art=19'),

  (19, 'Parc de Richelieu', '5, place du Cardinal', 37120, 'Richelieu', 47.007153, 0.325985, 'http://www.monuments-touraine.fr/page.php?id_noeud=108&id_art=58'),

  (20, 'Le donjon de Loches', '', 37600, 'Loches', 47.124760, 0.996709, ''),

  (21, 'Tour Saint-Antoine', 'rue Saint Antoine', 37600, 'Loches', 47.129082, 0.998672, ''),

  (22, 'Abbaye de Beaulieu-lès-Loches', '', 37600, ' Beaulieu-lès-Loches', 47.128548, 1.012330, ''),

  (23, 'Château de Tours', '', 37000, 'Tours', 47.397060, 0.693689, ''),

  (24, 'Cathédrale Saint-Gatien', 'rue Lavoisier', 37000, 'Tours', 47.395615, 0.694461, ''),

  (25, 'Musée du compagnonage', '8, rue Nationale', 37000, 'Tours', 47.396126, 0.686796, 'http://www.musee-du-compagnonnage.info/'),

  (26, 'Musée du Gemmail', '7, rue du Mûrier', 37000, 'Tours', 47.395016, 0.680852, 'http://www.gemmail.com/'),

  (27, 'Pagode de Chanteloup', 'BP 317', 37403, 'Amboise Cedex', 47.391102, 0.970080, 'http://www.pagode-chanteloup.com/'),

  (28, 'Abbaye de Fontevraud', '', 49590, 'Fontevraud-l''Abbaye', 47.181545, 0.051670, 'http://www.abbaye-fontevraud.com/'),

  (29, 'Château de Luynes', '', 37230, 'Luynes', 47.386387, 0.553479, ''),

  (30, 'Château d''Ussé', '', 37420, 'Rigny-Ussé', 47.249866, 0.291363, 'http://www.chateaudusse.fr/'),

  (31, 'Aqueduc Gallo Romain Luynes', '', 37230, 'Luynes', 47.397434, 0.568457, ''),

  (32, 'Chartreuse du Liget', '', 37460, 'Chemillé-sur-Indrois', 47.143856, 1.129981, ''),

  (33, 'Château de Montrésor', '', 37460, 'Montrésor', 47.155720, 1.201158, ''),

  (34, 'Château de Montpoupon', '', 37460, 'Céré-la-Ronde', 47.252983, 1.141881, 'http://www.montpoupon.com/'),

  (35, 'Château d''Azay le Ferron', 'rue Hersent Luzarche', 36290, 'Azay-le-Ferron', 46.850567, 1.069622, 'http://www.chateau-azay-le-ferron.com/');

Sélectionner un endroit "à proximité de" grâce à une requête MySQL

Pour trouver dans notre table marqueurs, des lieux se situant dans un rayon défini par rapport au couple latitude / longitude de l'adresse postale saisie, nous allons utiliser la commande SELECT ainsi que la formule de Haversine. La formule de Haversine est généralement utilisée pour calculer la distance entre deux paires de coordonnées GPS sur une sphère.

Pour plus d'informations sur cette formule vous pouvez consulter :

• Wikipédia : formule Haversine,
• Movable Type Scripts.

Voici l'instruction SQL permettant de trouver les 20 sites touristiques, les plus proches du centre d'un cercle de 25 kilomètres de rayon et ayant pour coordonnées - Latitude : 47.397060 - Longitude : 0.693689 (Château de Tours).

• on calcule la distance entre le point central et le point cible,
• on sélectionne uniquement les points cibles dont la distance est inférieure à 25 kilomètres du point central,
• on ordonne les résultats de la requête en fonction de la distance,
• on sélectionne que les 20 premiers résultats.

Pour effectuer une recherche en miles au lieu de kilomètres, remplacez 6371 par 3959

  SELECT id, ( 6371 * acos( cos( radians(47.397060) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(0.693689) ) + sin( radians(47.397060) ) * sin( radians( lat ) ) ) ) AS distance FROM locations HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;

On utilise mysql_real_escape_string afin de protèger les caractères spéciaux de la commande SQL.

  $requete = sprintf("SELECT nom, adresse, codepostal, ville, url, lat, lng, ( 6371 * acos( cos( radians('%s') ) * cos( radians( lat ) ) * cos( radians( lng ) - radians('%s') ) + sin( radians('%s') ) * sin( radians( lat ) ) ) ) AS distance FROM marqueurs HAVING distance < '%s' ORDER BY distance LIMIT 0 , 20",

	mysql_real_escape_string($centre_latitude),

	mysql_real_escape_string($centre_longitude),

	mysql_real_escape_string($centre_latitude),

	mysql_real_escape_string($rayon_recherche));

Paramètres de connexion à la base de données

Maintenant que vous disposez d'une table et de la requête SQL adéquate, vous pouvez les utiliser afin d'afficher les résultats de la recherche au format XML, que notre carte pourra utiliser, par le biais de requêtes javascript asynchrones.

Le fichier doit ressembler à ceci, mais avec les paramètres de connexion correspondant à votre base de données : connexionSQL.php

  <?php

	$nom_utilisateur_sql = "votre_nom_utilisateur_sql_ici";

	$mot_de_passe_sql = "votre_mot_de_passe_sql_ici";

	$base_de_donnees_sql = "nom_de_votre_base_de_données_sql_ici";

	$serveur_sql = "nom_de_votre_serveur_sql_ici";

  ?>

Création du fichier XML via l'API DOM de PHP 5

Tout d'abord, verifiez votre configuration serveur et assurez-vous que vous utilisez PHP 5. Pour cela créez une page, test.php par exemple, contenant uniquement cette ligne de code : echo phpinfo();

  <?php echo phpinfo(); ?>

puis consultez votre page : http://www.monsite.fr/test.php et vérifiez que le titre indique :

Une fois la vérification terminée, supprimez le fichier test.php de votre serveur.

Avec l'API DOM de PHP 5 il faut, tout d'abord, initialiser un nouveau document XML et créer le noeud parent "marqueurs".

Ensuite, il faut se connecter à la base de données, exécuter la requête SELECT, expliquée ci-dessus, sur la table "marqueurs", et itérer sur les résultats.

Puis, pour chaque ligne de la table (chaque emplacement géographique), il faut créer un nouveau noeud XML, ayant pour attribut les attributs de la ligne, et le joindre au noeud parent.

Enfin, envoyer le XML à l'écran.

Le fichier xml.php permettant d'effectuer toutes ces actions est décrit ci-dessous.

Code du fichier xml.php à enregistrer au format UTF-8

Vérification du fichier XML généré par xml.php

Pour vous assurer que votre script xml.php fonctionne correctement, tapez dans la barre d'adresse de votre navigateur :

  http://www.votre_site.fr/votre_repertoire/xml.php?lat=47.3902942&lng=0.6888514&rayon=100

Vous devez voir, alors, apparaître sur votre écran le fichier XML suivant :

Code : Vérification du fichier XML

  <marqueurs>

	<marqueur nom="Musée de l'hôtel Goüin" adresse="25, rue du Commerce" codepostal="37000" ville="Tours" url="http://www.musee-gouin.fr/" lat="47.395374" lng="0.684709" distance="0.64523046797706"/>

	<marqueur nom="Musée du compagnonage" adresse="8, rue Nationale" codepostal="37000" ville="Tours" url="http://www.musee-du-compagnonnage.info/" lat="47.396126" lng="0.686796" distance="0.66664620114032"/>

	<marqueur nom="Cathédrale Saint-Gatien" adresse="rue Lavoisier" codepostal="37000" ville="Tours" url="" lat="47.395615" lng="0.694461" distance="0.72684358255426"/>

	<marqueur nom="Musée du Gemmail" adresse="7, rue du Mûrier" codepostal="37000" ville="Tours" url="http://www.gemmail.com/" lat="47.395016" lng="0.680852" distance="0.79889382825108"/>

	<marqueur nom="Château de Tours" adresse="" codepostal="37000" ville="Tours" url="" lat="47.397060" lng="0.693689" distance="0.83585726410725"/>

	<marqueur nom="Prieuré de Saint-Cosmes" adresse="rue Ronsard" codepostal="37520" ville="La Riche" url="http://www.prieure-ronsard.fr" lat="47.389557" lng="0.651079" distance="2.8446715617746"/>

	<marqueur nom="Aqueduc Gallo Romain Luynes" adresse="" codepostal="37230" ville="Luynes" url="" lat="47.397434" lng="0.568457" distance="9.0972695321153"/>

	<marqueur nom="Château de Luynes" adresse="" codepostal="37230" ville="Luynes" url="" lat="47.386387" lng="0.553479" distance="10.200336567975"/>

	<marqueur nom="Château de Candé" adresse="" codepostal="37260" ville="Monts" url="http://www.monuments-touraine.fr/page.php?id_noeud=106" lat="47.296871" lng="0.664276" distance="10.551899657962"/>

	<marqueur nom="Château de Villandry" adresse="" codepostal="37510" ville="Villandry " url="http://www.chateauvillandry.com/" lat="47.341003" lng="0.514383" distance="14.237216246952"/>

	<marqueur nom="Château de Saché" adresse="rue du Château" codepostal="37190" ville="Saché" url="" lat="47.245773" lng="0.544521" distance="19.406633052259"/>

	<marqueur nom="Pagode de Chanteloup" adresse="BP 317" codepostal="37403" ville="Amboise Cedex" url="http://www.pagode-chanteloup.com/" lat="47.391102" lng="0.970080" distance="21.170636578478"/>

	<marqueur nom="Château d'Azay-le-Rideau" adresse="rue de Pineau" codepostal="37190" ville="Azay-le-Rideau France" url="http://azay-le-rideau.monument" lat="47.259647" lng="0.467434" distance="22.125882131536"/>

	<marqueur nom="Château Royal d'Amboise" adresse="BP 371 F" codepostal="37403" ville="Amboise Cedex" url="http://www.chateau-amboise.com/" lat="47.413147" lng="0.985165" distance="22.445657903198"/>

	<marqueur nom="Château de Langeais" adresse="" codepostal="37130" ville="Langeais " url="http://www.chateau-de-langeais.com/" lat="47.324844" lng="0.406151" distance="22.503890854267"/>

	<marqueur nom="Château du Clos Lucé" adresse="2, rue Clos Lucé" codepostal="37400" ville="Amboise" url="http://www.closluce.com/" lat="47.409302" lng="0.992761" distance="22.971320831492"/>

	<marqueur nom="Château de Chenonceau" adresse="" codepostal="37150" ville="Chenonceaux" url="http://www.chenonceau.com/" lat="47.328789" lng="1.067262" distance="29.311988779589"/>

	<marqueur nom="Château d'Ussé" adresse="" codepostal="37420" ville="Rigny-Ussé" url="http://www.chateaudusse.fr/" lat="47.249866" lng="0.291363" distance="33.787040183298"/>

	<marqueur nom="Château de Gizeux" adresse="" codepostal="37340" ville="Gizeux" url="http://www.chateaudegizeux.com/" lat="47.390766" lng="0.205543" distance="36.382808190414"/>

	<marqueur nom="Tour Saint-Antoine" adresse="rue Saint Antoine" codepostal="37600" ville="Loches" url="" lat="47.129082" lng="0.998672" distance="37.286658317987"/>

  </marqueurs>

 

Création de la carte

Une fois que la création du fichier XML fonctionne, il est temps de passer à la construction effective de la carte à l'aide de javascript.

Si vous n'avez jamais créé de carte à l'aide de l'API Google Maps, essayez quelques uns des exemples indiqués ci-dessous, afin de bien comprendre les principes de base nécessaires à la création d'une carte à l'aide de l'API Google Maps.

• La documentation officielle de Google
• Vidéo : Comment créer un compte Google
• Comment obtenir une clé API Google Maps
• Créez votre première carte avec l'API de Google Maps

Géocodeur et Recheche à proximité

Pour réaliser cette application nous allons créer quatre fonctions JavaScript :

1. geocodeAdresse() : va transformer l'adresse postale saisie dans le champ recherche en coordonnées géographiques : latitude, longitude.
2. rechercheProximite(center) :
   • va recevoir de la fonction geocodeAdresse() les latitude et longitude de l'adresse postale.
   • créer et envoyer la requête nécessaire à la construction du fichier xml.
     • Exemple : xml.php?lat=47.456123&lng=2.321654&rayon=75
   • extraire du fichier xml les données nécessaires à la constrution de :
     • la liste latérale par appel de la fonction creerLigneListe(),
     • des marqueurs et info-bulles, par appel de la fonction creerMarqueur().
   • Optimiser les caractéristiques de la carte (centre et zoom) pour afficher la totalité des marqueurs.
3. creerMarqueur(point, nom, adresse, codepostal, ville, url, distance) :
   • Créé un nouveau marqueur ancré sur le point,
   • Attribue au marqueur un icône et un titre,
   • Ajoute au marqueur un observateur d'événement. Tout 'click' sur le marqueur va déclencher l'ouverture de son info-bulle et l'affichage d'informations à l'intérieur.
4. creerLigneListe(nom, distance, marqueur) :
   • Créé et ajoute une ligne, sous la forme d'une balise <div /> à la liste située à droite de la carte,
   • Définit pour chaque ligne ses propriétés CSS,
   • Ajoute à chaque ligne de la liste trois observateurs d'événement :
     • Tout 'click' sur la ligne, déclenche l'ouverture de l'info-bulle du marqueur correspondant,
     • Modification des propriétés CSS de la ligne lorsque le curseur de la souris survole cette ligne : 'mouseover',
     • Modification des propriétés CSS de la ligne lorsque le curseur de la souris quitte cette ligne : 'mouseout'.

Code : function geocodeAdresse()

Code : function rechercheProximite(center)

La fonction rechercheProximite, affichée ci-dessous, transmet la latitude et la longitude à notre script PHP xml.php, puis utilise la fonction GDownloadUrl pour charger de façon asynchrone le fichier XML ainsi généré.

Etant donné que GDownloadUrl utilise XMLHttpRequest, cela impose que le fichier XML demandé soit hébergé sur le même serveur que celui ou réside la page HTML.

GDownloadUrl prend l'URL comme premier paramètre et, en cas de succès, transmet les données récupérées à la fonction.

Ensuite, la fonction rechercheProximite, va lire chacune des balises "marqueur" du fichier XML, les analyser et en extraire :

• le nom,
• l'adresse,
• le code postal,
• la ville,
• l'url,
• la distance par rapport au centre de référence,
• la latitude,
• la longitude,

puis transmettre ces données aux fonctions creerMarqueur() et creerListeLaterale() afin de créer le marqueur et la liste latérale.

De plus, l'affichage de la carte est optimisé afin que tous les marqueurs soient visibles, en utilisant :

• rectangleMarqueurs.extend(point);,
• rectangleMarqueurs.getCenter() ,
• maCarte.getBoundsZoomLevel(rectangleMarqueurs).

Création des marqueurs et de la liste latérale

Code : function creerMarqueur(point, nom, adresse)

Dans la fonction creerMarqueur(), affichée ci-dessous, on créé un marqueur ancré sur le point ayant pour coordonnées point, et on lui ajoute un observateur d'événement, qui, lorsque l'on clique sur le marqueur, déclenche l'ouverture d'une info-bulle (infowindow ou fenêtre) affichant :

• le nom,
• l'adresse,
• la distance,
• l'URL,

du lieu touristique sélectionné.

Code : function creerLigneListe(marqueur, nom, adresse, distance)

Dans la fonction creerListeLaterale(), affichée ci-dessous, on créé une balise <div /> contenant :

• le nom,
• la distance,

du lieu touristique, puis on lui ajoute trois observateurs d'événements :

• le premier, ouvre l'info-bulle (ou fenêtre) du marqueur si un 'click' sur le marqueur a été détecté,
• le second, change la couleur du fond (#eee) de la balise <div> au survole de la souris (mouseover),
• le troisième, change la couleur du fond (#fff) de la balise <div> lorsque la souris ne la survole plus (mouseout).

Le résultat final

Veuillez saisir ci-dessous une adresse et sélectionner un rayon de recherche par rapport à cette adresse Adresse :   Rayon (Km) : 5 10 25 50 75 100 150 200

Code du fichier index.htm à enregistrer au format UTF-8

Que faire désormais ?

Maintenant que vous disposez d'une application permettant la localisation de lieux touristiques sur votre site, vous pouvez lui ajouter d'autres fonctionnalités. Voici quelques idées :

• Recherche avancée : permettre aux utilisateurs de limiter les recherches par catégories ou en fonction d'un quelconque paramètre.
• Vous pouvez rendre vos info-bulles plus conviviales en y ajoutant des informations supplémentaires à l'aide d'une info-bulle à onglets dans laquelle vous pouvez insérer par exemple :
  • une carte en 3D Google Earth,
  • une Street View,
  • une vue panoramique,
  • un formulaire de calcul d'itinéraire,
  • etc ...
• Vous pouvez également ajouter les liens permettant à l'utilisateur de zoomer sur le lieu et/ou de calculer un itinéraire vers et/ou depuis cet endroit.

Comment enregistrer un fichier au format UTF-8

Pour enregistrer votre fichier en UTF-8, ouvrez, sous windows, le bloc note.

Copiez le code présent dans ce tutoriel ( xml.php ou index.htm ), puis collez le dans le Bloc-notes.

Au moment de l'enregistrement du fichier, sélectionnez dans la liste déroulante nommée "Codage", l'option "UTF-8", puis cliquez sur le bouton "Enregistrer".

Enfin, transférez ce fichier sur votre serveur.

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 : Creating a Store Locator with PHP, MySQL & Google Maps

Rechercher

Navigation

• Accueil
• Les News
• Carte - Map
• Contrôle - Bouton
• Marqueur - Marker
• Polyline - Lignes
• Polygone - Polygon
• Info-bulle - Fenêtre
• Itinéraire - Direction
• Street View
• Googlebar - Google Bar
• Géocodeur - Geocoder
• Kml - Kmz
• Truc & Astuce
• Lien Internet
• Articles
• Vidéos

Forum

• Forum d'aide Google Maps

Traduction - Translate

Géo Web Actu

• La modernisation de la défense

Evolutions et Bugs

• Mise à jour API
• Rapport sur les bugs

Groupe d'Aide Blog Anglais

• Google Maps API Discussion
• Lat Long Blog
• Google Geo Developers Blog

API Google Maps - API Google Earth - Fichiers KML KMZ - Aide Didacticiel Documentation Exemple Tutoriels Trucs et Astuces en Français sur TouraineVerte.com
Design réalisé à partir des tutoriels d'Alsacreations | Carte Google Maps | Carte Google Earth
http://www.TouraineVerte.com | © 2010 - Plan du site | fadamaps37@touraineverte.com