Je vous en parlais il y a quelque jours, le voila! Un petit tutoriel pour faire un mashup avec google maps sur votre site. J’ai réalisé un site début janvier pour l’école : www.le-passe-livre.com qui utilise google maps.

  • Vue d’ensemble du tutoriel

Nous allons utiliser une classe php (une fois de plus :-)) qui va nous permettre d’utiliser très simplement l’API de google. Comme presque toutes les API’s vous devez obtenir une clé pour pouvoir utiliser le service. Puis nous construirons notre google map en plaçant nos marqueurs sur la carte. Enfin nous l’afficherons.

  • Télécharger la classe et activer l’API

Vous pouvez télécharger la classe ici. Créez un dossier “classe” à la racine de votre site et décompressez l’archive à l’intérieur. Vous devez maintenant obtenir la clé qui va vous permettre d’utiliser l’API de google maps. Pour pouvoir tester votre site en local indiquez http://127.0.0.1/ pour l’url de votre site.

  • Création de la carte google

Je pense que le code est assez bien commenté. On créé une instance de notre carte, puis on fait le lien avec la clé google et on définit les caractéristiques de notre carte (taille,type de carte,etc etc).

  1.  
  2. <?php
  3. require('includes/GoogleMapAPI.class.php');
  4. $map->setAPIKey(’ABQIAAAAvjgjZ_Oh4DGvoa**************************EVoKaUlRpjBXuG0QTOhSYyitCXehqvZywz4H1mACoA3Y0nQ’);
  5. //quand je développe je met en comentaire la clé vers mon site //$map->setAPIKey(’ABQIAAAAvjgjZ_Oh4DGvoa**********************************KHDfvBQMU1YWoN3PfZpU2lJl5oJWX0pRyg’);
  6. //taille de la map
  7. $map->setHeight(”400″);
  8. $map->setWidth(”600″);
  9. //on desactive la barre de coté?
  10. $map->disableSidebar();
  11. //DesActive les boutons(map/satellite/hybrid).
  12. $map->disableTypeControls();
  13. //Quel est le type de carte par defaut ? (map/satellite/hybrid)
  14. $map->setMapType(’map’); // default
  15. //On déssactive les boutons pour afficher la direction d’un point a l’autre
  16. $map->disableDirections();
  17. // Permet de definir le zoom automatiquement afin de voir tous les marqueurs d’un coup.
  18. $map->enableZoomEncompass();
  19. //Active la mini map en bas a droite
  20. $map->enableOverviewControl();

Notre carte est créée. Cependant elle est vide.

  • Création d’un marqueur

Il existe plusieurs façons de placer un marqueur. Soit par géolocalisation (en indiquant la longitude et la latitude), soit en indiquant l’adresse. Je vous présente uniquement la seconde méthode car il me semble que c’est la plus facile à mettre en œuvre. La méthode que nous utilisons, addMarkerByAdress, prend 3 arguments : l’adresse, le nom du marqueur, est le contenu que nous souhaitons afficher dans l’infobulle. Si vous souhaitez que votre infobulle comporte des onglets il faut passer un tableau en paramètre.

  1. //Mon chez moi :p
  2. $map->addMarkerByAddress(’16 rue du 71ème mobile, 87000 Limoges’,
  3.  
  4. ‘Chez moi’,
  5.  
  7.  
  8. ‘Adresse’=>’
  9.  
  10. 16, rue du 71ème mobile
  11.  
  12. ’,
  13.  
  14. ‘La ville’=>’
  15. <h1>Limoges</h1>
  16.  
  17. C’est une ville agréable et relativement dynamique
  18.  
  19. ’,
  20.  
  21. ‘1ère année’=>’
  22. <ul>
  23. <li>Web : HTML, XHTML, CSS, AJAX, PHP, SQL.</li>
  24. <li>Analyse : Bases de la méthode Merise.</li>
  25. <li>C : Suivis du cursus de 1ère année à <a href="”www.3il.fr”">3il</a>.</li>
  26. <li>Environnement de travail : Eclipse, Linux, Windows.</li>
  27. <li>Anglais : Niveau scolaire.</li>
  28. </ul>
  29.  
  30. ’,
  31.  
  32. ‘Extra’=>’
  33. <ul>
  34. <li>Capitaine des espoirs de l’USAL</li>
  35. <li><a href="”http://newsussel.free.fr”" target="”_blank”">Premier site internet</a></li>
  36. </ul>
  37.  
  38. ’));
  39.  
  40. ?>

Comme vous pouvez le voir, les onglets peuvent contenir du code XHTML (et donc être mis en forme grâce aux CSS). Il ne reste plus qu’à afficher votre carte!

  • Afficher la google map

Petite explication préalable : la classe permet de nous simplifier la tâche en créant le javascript à notre place. Nous avons donc les appels du javascript à générer dans notre “head” XHTML. De plus le javascript doit être exécuter une fois la page chargée. Nous appellerons donc une fonction sur l’événement onload de la balise body. Notre page sera fin prête à être affichée.

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  4. <head>
  5.         //nos fonctions javascript sont généres ici
  6.     <?php $map->printHeaderJS(); ?>
  7.     <?php $map->printMapJS(); ?>
  8. <link rel="stylesheet" type="text/css" href="styles.css" media="all"/>
  9. </head>
  10.  
  11. <body onload="onLoad()">
  12. <div id="”map_map”">
  13. //la carte
  14. <?php printMap(); ?>
  15. //les raccourcis vers les marqueurs (2eme paramètre des marqueurs)
  16. <?php printSidebar();?></div>
  17.  

Il ne nous manque plus que les styles à créer.

  • Les styles CSS

Créez un dossier “styles” à la racine de votre site puis rajoutez y un fichier styles.css.

  1. /******gmap**************/
  2.  
  3. /* parait indispensable*/
  4. v\:* {
  5. behavior:url(#default#VML);
  6. }
  7.  
  8. /*pour les infobulles de la carte*/
  9. #gmapmarker {
  10. font: normal small verdana, arial, helvetica, sans-serif;
  11. font-size: 10pt;
  12. margin: 0px;
  13. width: 250px;
  14. height: 100px;
  15. overflow:auto;
  16. }
  17.  
  18. #map {
  19. float : left;
  20. }

Ça y est! Vous devriez avoir une belle carte sur votre page! La prochaine fois nous modifierons le script pour générer les marqueurs dynamiquement en fonction d’une base de donnée.

Ça marche chez vous? Vous avez fait les fous en rajoutant une image provenant de chez flickr dans votre infobulle? Montrez moi tout ça!

Partagez cet article :
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • co.mments
  • De.lirio.us
  • Live
  • Ma.gnolia
  • Pownce
  • Scoopeo
  • Technorati
  • TwitThis
  • Wikio FR
  • e-mail
  • Wikio

Autres articles intéressants :

Articles les plus actifs :