<!--:fr-->[tuto mashup] Google maps sur votre site : c’est possible! (version statique)<!--:-->

[tuto mashup] Google maps sur votre site : c’est possible! (version statique)

janvier 24th, 2008 PHP Antoine

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!

Antoine

Passionné du web et de tout ce qui s'en rapproche, je tiens se blog sans prétentions pour vous faire partager mes découverte et mes interrogations sur le développement, le management, l'agilité, la gestion de projet.

Did you enjoy this post?

If so, would you please consider sharing it with the world

User Responses

23 Responses and Counting...

  1. Jérôme

    janvier 24, 2008

    Bonjour, et merci pour ce tuto.

    Pour ma part, quand j’actualise ma page, odnc ma carte, certains marqueurs disparraissent, puis réapparaissent le coup suivant, comme si j’avais un certain affichage aléatoire.
    J’affiche dynamiquement une cinquantaine de lieux en France, à partir de l’association CP-Ville, cela après interrogation via requete SQL de ma BDD.

    Peux-être trop de requêtes de géolocalisation en peu de temps qui fait que certaines passent « à la trappe » ???

    Si quelqu’un a une idée, je suis preneur !

    Merci

  2. Guiral antoine

    janvier 24, 2008

    Bonjour Jérôme!

    Alors je n’ai jamais été jusqu’à 50 lieux (seulement une 15ene pour tester) et je n’avais pas ce problème. Je ne vois pas trop d’où peut venir ton problème dans le sens ou le php executé coté serveur va écrire du javascript qui sera executé coté client. Si ta requete est bien faite ton php ecrira tes 50 lieux en JS. Et si tes 50 lieux sont ecrient ben ils devraient s’executer TOUS. Pourrais tu mettre un lien pour que l’on puisse voir ça de plus près?

    Merci et à bientôt!

  3. Jérôme

    janvier 24, 2008

    Salut Antoine

    Voici la page que je cherche à développer : http://www.jesuisne.fr/carte_naissances.php

    Comme tu peux le voir, d’un coup à l’autre, les marqueurs ne sont pas les mêmes. Pourtant ma BDD n’évolue pas !

    Merci

    Jérôme

  4. Guiral antoine

    janvier 24, 2008

    salut,

    hum oui je viens de regarder…il y a toujours 8 marqueurs « de base » puis parfois certains viennent se rajouter a toulouse, bézier et paris…Je ne sais pas trop quoi te dire! Si tu veux que je regarde ton source envoi le moi par mail guiral.antoine[at]gmail[dot]com. Sinon je ne vais pas tarder à sortir la suite du tuto c’est à dire la version dynamique.

    En tout cas j’aime bien le service que tu propose! Si je trouve le temps je publierais un billet qui en parle un de ces 4 :-)

    A bientôt

    Antoine

  5. Jérôme

    janvier 24, 2008

    Merci Antoine, ton commentaire me fait plaisir ! ;-)

    Comme tu peux le voir, je développe un tout nouveau service de géolocalisation des naissances annoncées avec notre plateforme. A terme, quand je maitriserai cette API google map, je proposerai en plus dans l’infobulle la photo de l’enfant, et le faire-part textuel (au choix des parents bien sur)

    Je t’envoi mon script par mail !

    Merci !

  6. Guiral antoine

    janvier 24, 2008

    De rien!

    C’est une bonne idée de mettre photo+faire part dans l’infobulle! Si tu regarde le source que je t’ai envoyé tu devrais pouvoir t’en sortir pour gérer les infobulles :-)

    Je regarde ton script dès que je le reçoit ;-)

    A+

  7. Jérôme

    janvier 24, 2008

    Merci pour ton script ! J’attends tes commentaires sur le mien !

  8. meganic

    janvier 24, 2008

    bonjour, alors voila j’aimerais faire mumuse avec google maps en utilisant la meme api que celle du tuto mais le probleme c’est que je n’y arrive pô :/

    j’ai juste une carte toute grise qui apparait et aucun marqueur.

    j’suis un peu une quiche en html, javascript, php mais bon, j’ai copié collé le code, remplacé la clef , tout et tout et pourtant toujours rien…

    une idee?

  9. Guiral antoine

    janvier 24, 2008

    salut!

    as tu bien pris la « bonne clé » pour l’api? c’est dire si tu test en local il te faut une clé pour l’adresse http://127.0.0.1/ si tu test sur ton site il faut l’adresse de ton site.

    Après sans voir ton code c’est dure de te débuggé. Et le but d’un tuto c’est pas de copier coller le code, c’est d’essayer de lire, comprendre, apprendre le code ;-)

  10. meganic

    janvier 24, 2008

    salut, reponse rapide dis-donc ..! :)

    La clef est bonne, je l’utilise pour tester en local des trucs a partir des examples de la google maps api… sans probleme.

    Pour le copier-coller, j’suis bien d’accord que le but du tuto est d’apprendre … :) j’ai pas copié collé sans essayer de comprendre loin de la , mais j’ai pensé qu’il serait bien de deja voir le resultat de ton exemple…:)
    j’etais deja meme parti pour etendre l’API avec des fonctions qui vont m’etre utiles pour mon projet…. mais bon deja la comme ca ça ne fonctionne pô.

    En lisant le code j’ai d’abord vu que tu initialises la map avec :
    $map = new GoogleMapAPI(’map’,’tutoriel_map’);

    puis le code html qui fait

    //la carte
    printMap(); ?>
    //les racourcis vers les marqueurs (2eme parametre des marqueurs)
    printSidebar();?>

    alors je me suis dit, bingo, l’id du div conteneur est ‘map_map’ et c initialisé avec map..
    Mais bon c’etait pas ça vu que l’id donné au constructeur va etre utilisé pour ecrire le code (via « getMapJS() ») du div conteneur necessaire.

    enfin bon le code de ma page .php est donc le suivant:

    J’ai supprimer ton code parce que wordpress ne l’accepte pas. guiral.antoine[at]gmail[dot]com

  11. Guiral antoine

    janvier 24, 2008

    On continue par mail si cela ne te dérange pas. Par contre pas beaucoup de temps en ce moment. (Va falloir que je pense à faire payer un jour lool)

  12. meganic

    janvier 24, 2008

    hum..bon , en gros ce que j’essaie de poster, c’est que dans ma page php, j’ai
    le meme code php que ds le tuto, suivit du code html, le meme que le tuto…tout ca avec ma clef, valide pour mon site.

    j’ai bien la page avec la carte qui s’affiche mais c tout gris…
    g pas les tiles des images.
    les controles sont la , fonctionnels apparement…(j’ai laissé la mini map, changé le type de carte, etc…)
    j’ai tenté un « $map->setCenterCoords(); » et d’autres trucs..

    -> pas de message d’erreur, aucun message non plus de webdevelopper… meme resultat sous ie que sous firefox…

    a n’y rien comprendre…
    :/

  13. meganic

    janvier 24, 2008

    Te derange pas pour moi jvais me debrouiller. :)
    Après tout je débute seulement ds le dev web et j’ai encore bcp de choses a apprendre…

    J’vais dissequer l’api car de toutes facons j’ai besoin de m’en developper une a moi, avec certaines fonctionnalités en moins, et bcp d’autres en plus…

    Merci tout de meme.
    je tiendrai au courant quand j’aurai trouve la solution et peut-être aussi qd j’aurai une version montrable de mon projet :) (et non…. rien a voir avec flickr..:):))

  14. Présentation de jesuisné.fr « Antoine Guiral : apprenti du web 2.0

    janvier 24, 2008

    [...] de données (1/2)[tuto jquery] drag ‘n drop avec sauvegarde automatique en base de données (2/2)[tuto mashup] Google maps sur votre site : c’est possible! (version statique)[tuto mashup] Galerie photo animée via Flickr : animer votre galerie (2/2)[tuto mashup] Galerie [...]

  15. Cédric

    janvier 24, 2008

    Salut voila,j’aimerai savoir comment c possible de faire celà :

    http://www.tivipro.tv/annuaireg.php

    en gros c’est un regroupement de marker, est ce que tu aurai une solution pour faire la même chose?

    Merci d’avance

  16. Antoine

    janvier 24, 2008

    Salut,
    je n’ai pas vu de regroupement de marqueur. LA seule chose que j’ai vu c’est un compteur : au premier stade il affiche le nombre de « marqueur » dans la région, puis dans le département et enfin les marqueurs sus nommés. Mais il n’y a pas a proprement parlé de regroupement de marqueur. Là il te suffit de savoir combien il y en a pour la zone affiché et tu affiche un marqueur avec un chiffre dessus.
    A bientot,
    Antoine.

  17. Cédric

    janvier 24, 2008

    Ok, mais sais-tu comment il fait pour faire cela?

  18. David

    janvier 24, 2008

    Bonjour,

    Monsieur j’ai suivi toutes les étapes son aucune résultat.
    est-possible de donner une explication un peu détaillée? c.a.d la ou il faut mettre les fichiers pour avoir google maps sur mon site.

    Cordialement

  19. Antoine

    janvier 24, 2008

    Salut david,
    tu peux me tutoyer ;)

    Je viens de voir que certain caractère n’était pas passé dans l’éditeur, je viens de corriger le tout. A priori cela devrait marcher mieux. Notamment au niveau des include et autres require qui avaient disparu. Donc un seul fichier qui contient ce code et ca devrait marcher. Sinon, vu que tu es un professionnel tu peux aussi utiliser directement l’api de google qui est beaucoup plus souple.
    Au plaisir de te revoir parmi nous ;)

  20. dano

    janvier 24, 2008

    Bonjour,

    j’ai essayé d’installer l’api en suivant votre tuto, mais j’ai cette erreur :

    Fatal error: Call to a member function setAPIKey() on a non-object in C:\Program Files\xampp\htdocs\Cheminees\localisation.php on line 5

    Une idée?
    Auriez-vous un fichier php complet?

    Merci par avance

  21. amorel

    janvier 24, 2008

    salut

    j’essaie d’intégrer une map dans un site fait par un CMS

    je ne comprends pas ou le require va chercher la classe, du coup je n’arrive pas a la mettre au bon endroit et il m’arrive ca : Warning: require(includes/GoogleMapAPI.class.php) [function.require]: failed to open stream: No such file or directory in

    une idee serait la bienvenue

    sinon j’ai profite de ce tuto pour visiter ton site que j’ai trouve sympa. c’est cool de partager tes découvertes avec les internautes.

    a+

    alex

  22. Antoine

    janvier 24, 2008

    Salut alex,
    il va chercher la class dans le path indiqué dans le require. Dans le tuto c’est « includes/monfichier.class.php ». Mais rien de t’empêches de le modifier! Il faut juste que tu modifie le path pour qu’il pointe à l’endroit où tu as mis ta class. J’ai répondu à ta question?

  23. Vives Nicolas

    janvier 24, 2008

    Bonjour,

    Il me semble qu’il manque quelques détails pour un tuto fonctionnel :$map = new GoogleMapAPI(’map’,'map_map’); à placer après le require et le pas oublier de rajouter map-> devant printMap() et printSidebar().

    Cordialement

Leave a Reply

Default User

Your Name

janvier 24, 2008

* Name, Email, and Comment are Required

Get Adobe Flash playerPlugin by wpburn.com wordpress themes