Tutoriel application Google Map avec PHP

Me voila de retour avec un nouveau super tutoriel Aujourd'hui nous allons apprendre comment créer une application Google Map (histoire d'être bien tendance) sans utiliser la moindre ligne de code Javascript, uniquement du PHP. (on a assez fait avec le tutoriel sur Mootools, n'est ce pas ?)

Bon on se lance un peu de musique et gogogo !

Si tu ne trouves pas ton bonheur ici ou si tu recherches des fonctions plus avancées, je te conseille ce site qui regorge de tutos du plus simple au plus avancé sur Google map. Par contre c'est en anglais, mais va falloir te forcer un peu hein

Pourquoi Google Map ?

Faisons un petit tour rapide de ce qui ce fait en ce moment .Il existe trois acteurs majeurs pour générer des cartes en ligne:

• Yahoo! Maps
  Propose une API (=Application Program Interface) très puissante, permet même de faire des maps en Flash avec Javascript ou en AJAX. La liberté de personnalisation est incredible incroyable, notamment cet exemple.Documentation soignée et claire comme toujours chez Yahoo!. Vous pouvez voir des exemples d'applications réalisées avec Yahoo! Maps.
• Google Map
  Documentation très claire également. Simple d'utilisation et plus diffusé et connu pour les utilisateurs de bases. Nous allons l'explorer plus en détails dans la suite. Vous trouverez ici un wiki comportant de nombreuses ressources et exemples.
• Virtual Earth
  C'est le petit nouveau de la bande, celui du grand Microsoft qui veut pas rester � la traine. Je n'ai pas vraiment eu le temps de tester et leur API en est � ses balbutiements. Laissons lui le temps de grandir un peu car pour l'instant il a beaucoup de retard, surtout niveau documentation et exemples.

Pour ce tutoriel, nous prendrons Google car il existe une classe PHP qui permet de pouvoir l'utiliser sans faire de Javascript. trop de Javascript tue le Javascript

GoogleMapAPI.class.php

Nous utiliserons pour ce tutoriel , cette excellente classe que je vous laisse télécharger. Sinon vous pouvez directement la télécharger ici. (renommer ensuite de .txt � .php)

Utilisation de la classe

Nous allons pour commencer créer notre petit fichier tutoriel_google_map.php dans le même repertoire que notre classe.

On commence par ajouter notre petit code PHP, les commentaires sont suffisamment explicite je pense. Il te faudra une clé Google.

//on inclus le fichier necessaire
require('GoogleMapAPI.class.php');
//on crée notre carte
$map = new GoogleMapAPI('map','tutoriel_map');
// permet de mettre en cache afin d'eviter des requetes inutiles ds le futur
//on ne l'utilisera pas dans notre cas , car il faut installer PEAR et c'est chiant
//mais il faudrait le faire dans une utilisation réelle
//$map->setDSN('mysql://root:yr@localhost/GEOCODES');
// METTEZ ICI VOTRE CLE GOOGLE
$map->setAPIKey('ICI TU MET TA CLE');
//taille de la map
$map->setHeight("500");
$map->setWidth("650");
//on desactive la barre de coté?
//$map->disableSidebar();
//DesActive les  boutons(map/satellite/hybrid).
$map->disableTypeControls();
//Quel est le type de carte par defaut ? (map/satellite/hybrid)
$map->setMapType('map'); // default
//On déssactive les boutons pour afficher la direction d'un point a l'autre
$map->disableDirections();
// Permet de definir le zoom automatiquement afin de voir tous les marqueurs d'un coup.
$map->enableZoomEncompass();
//Active la mini map en bas a droite
$map->enableOverviewControl();
//permet de définir l'icone sur la map, nous on change pas
//$map->setMarkerIcon('http://www.canadianwinter.ca/uploads/icon/marker_cw.png','http://www.canadianwinter.ca/uploads/icon/marker_cw_shadow.png',6,20,10,1);

//CREATION DES MARQUEURS
//on peut egalement utiliser addMarkerByCoords() si on a déj�  la latitude et longitude des points
//Exemple basique
$map->addMarkerByAddress('16 Boulevard Winston CHURCHILL, 25000','IDfr (ex simple)','IDfr c'est bien. blog.idfr.net');
//exemple avec du HTML
$map->addMarkerByAddress('4 rue de l'ermitage, Besançon, 25000','Vt-design (ex HTML)','
<h1>Vt-Design</h1>
4 rue de l'ermitage, Besançon, 25000
<strong>gras</strong>
<em>italique</em>
<a href="http://vt-design.com">Vt-design.com</a>');
//exemple avec onglet
$map->addMarkerByAddress('1336 Notre Dame West, Montreal, QC H3C1K7 ','Griffintown Media (ex onglet)',array('Contact'=>'1336 Notre Dame West, Montreal, QC H3C1K7
', 'Description'=>'Agence de communication plutot spécialisée dans le print'));
//Ex avec beaucoup de contenu
$map->addMarkerByAddress('9 rue de la grande planche,Saint-vit, 25410','Ma maison (ex bcp texte)','
Beaucoup de contenu
Beaucoup de contenu
Beaucoup de contenu
Oh nan mon dieu ca va dépasser !
Beaucoup de contenu
Beaucoup de contenu
Beaucoup de contenu
Beaucoup de contenu
Beaucoup de contenu
Et voila ca dépasse je vous avais prévenu !
');
?>

A la suite, le code HTML et CSS de base pour afficher notre carte et la barre de navigation.

<script src="mootools.release.83.js" type="text/javascript"></script>
printHeaderJS(); ?>
printMapJS(); ?>

<script src="../js/slimbox.js" type="text/javascript"></script>

 

<!-- necessaire pour google pour tracer les polylines -->
<!--    v:* {     behavior:url(#default#VML);   }   /*pour les infobulles de la carte*/   #gmapmarker {    	font: normal small verdana, arial, helvetica, sans-serif;   	font-size: 10pt;   	margin: 0px;   	width: 350px;   	height: 150px;   	overflow:auto;   }

#gmapmarker p{    	margin : 0;   	padding : 2px 0 2px 0;   }

#gmapmarker a {text-decoration: none; color: #0066CC; background-color: transparent;}

#gmapmarker a:hover {color: #F60; background-color: transparent;}

#gmapmarker h1 {   	font-weight: bold;    	font-size: 13px;    	color: #369;    	border-bottom: 2px solid #369;   	padding : 2px;   	margin : 0;   }

/*div qui contient la carte*/   #map {   	float : left;   }  -->
<h1>Tutoriel Google Map API avec PHP (http://fardeen.biz)</h1>
<table border="1">
<tbody>
<tr>
<td>printMap(); //on affiche la map ?></td>
<td>printSidebar(); //on affiche la barre de nav?></td>
</tr>
</tbody></table>

On obtient ce magnifique résultat final.

Il existe de nombreuses autres fonctions que je te laisse découvrir sur la page de la classe (en bas de la page, après Base Class Methods)

Exemple d'application plus avancée

Bon l'exemple précédent n'a pour but de vraiment montrer la facilité avec laquelle on peut intégrer google Map.

Avec ce que nous avons vu dans le précedent tutoriel sur Mootools, avec l'ajout d'une interaction avec une basé de donnée, et ce que vous venez d'apprendre dans ce tutorel il est possible d'obtenir une application (que j'ai réalisée en anglais) comme celle ci (cliquez sur l'image)

Cette application est gérée grâce à une interface d'administration, mais cela fera l'objet d'un prochain tutoriel (edit : maintenant disponible). J'ai également intégré ce prototype Javascript qui permet d'ouvrir des fenètres dans la page plutôt qu'une popup.

Conclusion

J'espère que ce tuto vous a plu et comme d'hab hésitez pas à poser des questions, ou à me corriger si j'ai dit une connerie

Voila tu es maintenant prêt à faire une application de tueur toi aussi !

Prochain tuto : Faire une administration de fou très rapidement et simplement. Pour rester informé, inscris toi au flux RSS.