1. Création de la table MySQL

Pour commencer, téléchargez la base de données MySQL à cette adresse. Importez le fichier depuis votre interface phpmyadmin.

Voici la structure de cette BDD :

Je ne vais pas vous détailler tous les champs, seulement ceux qui me semblent nécessaires :

geo_statut : Ce champ nous permettra de gérer si on le souhaite une validation des points par un administrateur.

geo_pos : La position du point sous la forme (longitude, latitude). Cela permet d’accélérer le processus d’affichage des points.

Passons maintenant a l’établissement de connexion avec la BDD.

2. Connexion à la base de données MySQL

Ouvrez votre fichier "mysql_connect.php" et collez y le code suivant :

<?php
$db_type = 'dbtype'; // ici remplacez par 'mysql'
$db_host = 'yourhost'; // l'host de votre bdd
$db_name = 'dbname'; // son nom
$db_username = 'dbusrname'; // votre username
$db_password = 'dbpass'; // votre password
$db_select = 'dbselect'; // la db ou votre table est enregistrée
$connexion = mysql_connect($db_host,$db_username,$db_password);
if ($connexion)
{
mysql_select_db($db_name,$connexion);
}
else
{
}
?>

Votre fichier de connexion est maintenant prêt ! Passons à l’ajout.

3. Ajout d’un point à la base de données

Ouvrez votre page "ajout.php" et collez y le code ci-dessous :

<h1>D&eacute;poser un ajout</h1>
<?php
// Partie de traitement du formulaire...

// Si la requete s'est bien effectuée et donc qu'un ajout a été effectué
if ($_GET['message']=="ok")
{
 // On affiche un message de confirmation
 ?>
 <p>Votre ajout a bien &eacute;t&eacute; ajout&eacute;e &agrave; notre base de donn&eacute;es et sera trait&eacute;e dans les plus brefs d&eacute;lais.</p>
 <p align="center"><a href="index.php">Retour &agrave; l'index</a></p>
 <?php
}
// Si erreur dans la requete
else if($_GET['message']=="errbdd")
{
 // On affiche un message d'erreur
 ?>
 <p>Erreur de connexion à la Bdd...</p>
 <p align="center"><a href="index.php">Retour &agrave; l'index</a></p>
 <?php
}
// Sinon...
else
{
 // Si le bouton ajouter! a été appuyé
 if (isset($_POST['ajouter']) && $_POST['ajouter'] == 'Ajouter!')
 {
 // Récuperation des variables postés
 $date = htmlentities($_POST['date']);
 $position = htmlentities($_POST['position']);
 $adresse = htmlentities($_POST['adresse']);
 $titre = htmlentities($_POST['titre']);
 $description = htmlentities($_POST['description']);
 // Si tous les champs ont étés remplis
 if ( $_POST['titre']!="" && $_POST['adresse']!="" && $_POST['description']!="" && $_POST['date']!="" )
 {
 // Connexion avec la BDD
 $mysql_link = include ('mysql_connect.php');
 // Si connexion effectuée
 if($mysql_link)
 {
 // Requete et execution de la requete
 $requete = "INSERT INTO geolocalisation (geo_id,geo_statut,geo_date,geo_pos,geo_adresse,geo_titre,geo_description) VALUES('','1','$date','$position','$adresse','$titre','$description')";
 $execution = mysql_db_query($db_select, $requete);
 // Suivi d'une redirection JS
 ?>
 <SCRIPT LANGUAGE="JavaScript">
 document.location.href="index.php?page=ajout&message=ok"
 </SCRIPT>
 <?php
 }
 // Si erreur de connexion à la bdd
 else
 {
 ?>
 <SCRIPT LANGUAGE="JavaScript">
 document.location.href="index.php?page=ajout&message=errbdd"
 </SCRIPT>
 <?php
 }
 ?>
 <?php
 }
 // Si un des champs est vide on affiche un message d'erreur
 else
 {
 ?>
 <h2>Erreur</h2>
 <div></div>
 <p>Au moins un des champs est vide !</p>
 <?php
 }
 }

// Partie formulaire
 ?>
 <form action="index.php?page=ajout" method="POST">
 <div></div>
 <?php
 $date = date('Y-m-j H:i:s');

 ?>
 <h2>Nom de votre ajout</h2>
 <p>Entrez ici le nom de votre ajout. Cel&agrave; peut &ecirc;tre par exemple votre nom.</p>
 <p><input name="titre" type="text" value="<?php echo "$titre";?>" size="50" /></p>
 <h2>Adresse</h2>
 <p>Entrez ici l'adresse ou est localis&eacute;e l'odeur.</p>
 <p><input name="adresse" type="text" value="<?php echo "$adresse";?>" onchange="addAddress(this.value); return false" size="50" /><input name="date" type="hidden" value="<?php echo "$date";?>"/><input name="position" id="position" type="hidden" value="<?php echo "$position";?>" readonly="readonly"  /></p>
 <h2>Description</h2>
 <p>Entrez ici une courte description de l'odeur.</p>
 <p><textarea name="description" cols="38" rows=""><?php echo "$description";?></textarea></p>
 <p align="center"><input type="submit" name="ajouter" id="submit" value="Ajouter!"></p>
 </form>
 <?php
}
?>

Pour une fois je ne vais pas détailler tout le code, tout est commenté. Cependant quelques détails sont necessaires.

Dans le formulaire …

<input name="adresse" type="text" value="<?php echo "$adresse";?>" onchange="addAddress(this.value); return false" size="50" />

Quand l’utilisateur modifie le contenu de cet input, appel de la fonction "addAdress()" avec en paramètre la valeur de l’input !

La fonction "addAdress()" va renvoyer la position a un autre input nommé "position".

Ouvrez votre fichier "geolocalisation_javascript.php" et collez y le code suivant :

function addAddress(address) {
 document.getElementById('submit').disabled=true;
 geocoder = new GClientGeocoder();
 if (geocoder) {
 geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 document.getElementById('position').value=point;
 document.getElementById('submit').disabled=false;
 }
 }
 );
 }
 }

Le fonctionnement est exactement le même que pour la fonction "showaddress()". Simplement, elle enverra la valeur de "point" dans l’input nommé position !

document.getElementById('position').value=point;

Pourquoi ? Tout simplement car cela accélèrera le processus d’affichage des points étant donné qu’on demandera à l’API de travailler avec des positions déjà calculés…

Fermez votre fichier "ajout.php", nous en avons terminé avec lui .

4. Affichage des points sur notre carte

Vous me direz que maintenant il faudrait afficher ces points sur la carte. C’est vrai ! Pour cela je vous ai codé une petite fonction nommée "show()" simplifiée qui elle n’est pas présente dans les sources. Si vous ne voulez pas afficher tous les points de la carte mais faire un formulaire de recherche par exemple, je vous invite à consulter les sources, tout y est !

Si vous souhaitez simplement afficher tous les points présents dans la BDD, ouvrez votre fichier "geolocalisation-javascript.php" et collez le code suivant HORS des balises de javascript :

<?php
include ('mysql_connect.php');
echo "<script type=\"text/javascript\">
 function show() {
 // Creation du marqueur
 var blueIcon = new GIcon(G_DEFAULT_ICON);

 blueIcon.shadow = \"\";
 // On attribue le marqueur a l'option GMarkerOptions
 markerOptions = { icon:blueIcon };
 ";

 $date = date('Y-m-j H:i:s');

 // Requete SQL
 $sql="SELECT * FROM geolocalisation";
 $retour_recherche=mysql_query($sql);

 // Tant qu'il y à des enregistrements
 while($this_last=mysql_fetch_array($retour_recherche))

 {
 $id = $this_last['geo_id'];
 $date = $this_last['geo_date'];
 $adresse = $this_last['geo_adresse'];
 $geo_pos = $this_last['geo_pos'];
 $titre = $this_last['geo_titre'];
 $description = $this_last['geo_description'];
 // On ajoute des points sur la carte
 echo "
 var point = new GLatLng$geo_pos;
 var marker".$id." = new GMarker(point,markerOptions);
 map.addOverlay(marker".$id.");
 var html".$id." = \"<center><b><u>$titre</u></b></center><br/><br/>$description\";
 GEvent.addListener(marker".$id.", 'click', function() {
 marker".$id.".openInfoWindowHtml(html".$id.");
 });
 ";

 }
 echo "      }</script>";

Comme vous le constatez c’est un mélange de PHP et de JS, PHP pour récupérer les informations de la BDD et JS pour le traitement avec l’API.

Vous pouvez modifier les points par défaut googlemaps par des points personnalisés en ajoutant :

blueIcon.image = \"VotreImage\";

Après la ligne :

var blueIcon = new GIcon(G_DEFAULT_ICON);

On oubliera pas bien entendu de modifier le body onload de notre "index.php" en y ajoutant "show()" ce qui nous donnera :

<body onload="initialize();show();">

Nous en avons maintenant terminé avec l’API Googlemaps.

Encore une fois ( je me répète je sais ! ) si vous souhaitez plus d’informations ou aller un peu plus loin en matière de traitement des points affichés je vous invite à télécharger les sources ou à consulter la documentation officielle.

Je reste également à votre disposition si vous avez des questions bien entendu.

1. Création du champ de recherche

Ouvrez votre page "geolocalisation.php" et collez y le code suivant :

// Formulaire d'affichage "zoom sur carte" d'une adresse
<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">
<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Explications :

<form action="#" onsubmit="javascript:showAddress(this.address.value); return false">

On ouvre notre formulaire avec aucune action afin de ne pas recharger la page du navigateur pour rien. Pour appeler notre fonction javascript on fait un "onsubmit=showAddress()" avec en paramètre "this.adress.value", ce qui correspond a la valeur du champ "address".

<h2>Voir adresse</h2>
<table width="700" border="0" cellspacing="0">
 <tr>
 <td width="200" align="left">Adresse : </td>
 <td width="400" align="left"><input type="text" size="60" name="address" value="" /></td>
 <td width="100" align="right"><input type="submit" value="Voir" /></td>
 </tr>
</table>
</form>

Ici simple mise en forme du champ de recherche, simplement ne pas oublier de mettre name="address" a notre text-input.

C’est terminé pour cette page, passons maintenant à "geolocalisation_javascript.php".

2. Fonction JS de recherche

On va créer la fonction qui permettra à l’API de zoomer sur l’adresse demandée. Nous appellerons cette fonction "showAddress()". Avant de commencer, sachez que ma fonction est inspirée de la doc de L’API Google Maps, vous y trouverez facilement d’autres exemples.

Ouvrez la page "geolocalisation_javascript.php" et collez y le code suivant. Attention, n’oubliez pas de placer tout ce code entre les balises "<script type="text/javascript">" et "</script>".

function showAddress(address) {
      if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
              map.setCenter(point, 11);
            }
          }
        );
      }
    }

Explications :

function showAddress(address) {
 if (geocoder) {

On créer donc notre fonction "showAddress()" avec un paramètre appelé ici "address", puis on vérifie si l’API est bien chargée via la variable "geocoder".

geocoder.getLatLng(
 address,
 function(point) {
 if (!point) {
 alert(address + " not found");
 } else {
 map.setCenter(point, 11);
 }
 }
 );
 }
 }

On demande simplement à l’api via la methode "geocoder.getLatLng" de récuperer la longitude et la latitude de notre adresse. Si l’adresse n’existe pas, on ouvre une fenêtre d’erreur en JS ( libre à vous de faire ca plus proprement ) afin d’afficher à l’utilisateur que son adresse n’est pas bonne. Si l’adresse existe, on zoom sur la carte via "map.setCenter(point, 11);", le premier argument étant notre position recherchée et le 2eme le niveau de zoom appliqué.

C’est terminé pour cette étape 2 ! Essayez donc d’entrer une adresse dans le champ de recherche, la carte devrait automatiquement ce centrer dessus.

N’oubliez pas qu’un complément de documentation est disponible dans la doc officielle.

Dans la 3eme étape, nous verrons comment stocker les données nécessaires à l’affichage dans une base de données de type MySQL.

A bientôt !

1. Création des fichiers necessaires

Voici la liste des fichiers qui seront nécessaires dans ce tutoriel :

• index.php – Notre index, il contiendra les fonctions nécessaires et appellera les différentes pages.
• geolocalisation_javascript.php – Ce fichier contiendra les fonctions javascript pour le fonctionnement de l’API.
• geolocalisation.php – Notre carte.
• ajout.php – Cette page permettra l’ajout à la base de données de nouvelles adresses.
• mysql_connect.php – Notre fichier de connexion à la base de données MySQL.

Vous pouvez directement télécharger les sources ici.

2. Générer une "API key" pour son site

Pour utiliser librement Googlemap sur votre site, vous devez dans un premier temps générer une clé ici. Cette clé nous servira a "authentifier" notre site lors de l’initialisation de l’API. Commençons donc par rajouter le javascript permettant d’utiliser l’api à notre fichier "index.php" entre les balises <head> et </head> :

<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;sensor=false&amp;key=YOURKEY" type="text/javascript"></script>

Remplacez YOURKEY par la clé que nous avons généré.

On va également en profiter pour inclure la page qui contiendra tout le code javascript :

<?php include("geolocalisation_javascript.php");?>

Pour terminer, on va ajouter un moyen de naviguer entre nos deux pages principales ( Ajout d’un point via « ajout.php » & Affichage de la carte via "geolocalisation.php" ) entre les balises <body> et </body> :

<ul>
<li><a href="index.php?page=geolocalisation">Geolocalisation</a></li>
<li><a href="index.php?page=ajout">Ajout</a></li>
</ul>
<?php
 if ($_GET['page'] == 'geolocalisation') { include("geolocalisation.php"); }
 elseif ($_GET['page'] == 'ajout') { include("ajout.php"); }
 else { }
?>

Rien de bien compliqué ici, c’est assez basique, si vous possédez déjà un site et que vous procédez à une intégration de googlemap, vous pouvez sauter cette étape.

3. Initialisation et affichage de la carte

Pour le moment, vous ne voyez rien et c’est tout à fait normal. On va voir comment initialiser la carte une fois l’authentification avec la key reussie.

On va commencer par le fichier "geolocalisation.php" qui je vous le rappelle est le fichier ou la carte sera affichée. Editez donc ce fichier et collez y le code suivant :

<h1>G&eacute;olocalisation</h1>
<h2>Carte</h2>
 <div id="map_canvas" style="width: 700px; height: 350px;margin-top:5px;"></div>

Je vous passe le détail de la ligne 1 et 2 c’est de la simple mise en page.

Passons a la ligne

<div id="map_canvas" style="width: 700px; height:  350px;margin-top:5px;"></div>

On créer une div avec comme id "map_canvas", cette id indiquera a la fonction JS d’afficher la map dans cette div. On lui attribue ensuite une taille, ici 700px de large pour 350px de haut. Une petite marge au dessus pour la mise en page et c’est terminé !

Passons ensuite aux choses serieuses. Ouvrez votre fichier "geolocalisation_javascript.php" et collez y le code suivant je vous l’expliquerai juste en dessous :

<script type="text/javascript">

 var map = null;
 var geocoder = null;
 var marker;

 function initialize() {
 if (GBrowserIsCompatible()) {
 map = new GMap2(document.getElementById("map_canvas"));
 geocoder = new GClientGeocoder();
 map.setUIToDefault();
 }

</script>

Explications :

<pre> var map = null;
 var geocoder = null;
 var marker;

Simple initialisation de variables qui nous serviront dans les fonctions JS.

function initialize() {

On créer une nouvelle fonction que l’on appelle "initialize()"

if (GBrowserIsCompatible()) {

Vérification si le browser est compatible… Si ce n’est pas le cas, je vous laisse gérer l’affichage d’un petit message d’erreur .

map = new GMap2(document.getElementById("map_canvas"));

C’est ici que l’on va demander au code JS de créer la carte de de l’afficher dans la div que l’on a créer précédemment, d’où l’importance de définir une ID à notre div.

geocoder = new GClientGeocoder();

Créer une nouvelle instance de Geocoder, cela nous permettra d’envoyer des requêtes aux serveurs Google Map.

map.setUIToDefault();

Utilisation de l’interface de navigation de base de Google Map.

Voila ! Rendez-vous sur votre index.php, cliquez sur géolocalisation et si tout va bien, vous devriez obtenir le résultat suivant :

Félicitations ! Nous verrons dans la prochaine étape comment ajouter un champ de recherche afin de zoomer sur une partie de la carte. D’ici la, n’hésitez pas à consulter les sources!

Sa première partie traitant de l’initialisation et de l’affichage de la carte sera disponible en début de soirée, le temps pour moi de rédiger une explication claire du code. Ce dernier à été réalisé lors de mon Projet BTS ou il m’a été demandé de réaliser un site pour une plateforme du reseau ATMO Lorraine Nord, organisme qui contrôle la qualité de l’air en Lorraine. Le visiteur devait via le site pouvoir déposer une plainte suite à la pollution et consulter la carte avec une visualisation des dernières plaintes.

Pour ce tutoriel, tous les styles ont été supprimés afin de simplifier le code au maximum.

En attendant, vous pouvez d’ores et déjà télécharger les sources complètes directement sur notre site.

Vous y retrouverez l’actualité des nouvelles technologies web, des tutoriels en PHP, CSS et XHTML ainsi que nos dernières créations.

Le site vient à peine d’être mis en ligne, je vais essayer d’ajouter du contenu dans les prochaines heures.