API Google map : Etape 3 – Stockage et Affichage de points

9 février 2010 par Jordan Matejicek | Catégorie: Outils Google |

Aujourd’hui nous allons voir comment enregistrer des points dans une base de données et comment les afficher sur notre carte.
Pour ce tutoriel vous aurez bien entendu besoin d’une base de données ( MySQL ou autre ) cependant si vous utilisez une BDD autre que MySQL il faudra vous adapter.

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.