[tuto mashup] Google maps sur votre site : c’est possible! (version statique)
Posté par Guiral antoine le janvier 24, 2008
Le tutoriel est présent sur mon nouveau blog (lien direct vers le tutoriel). Désolé pour la gène occasionnée…
Je vous en parlais il y a quelque jour, 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 vous devez obtenir une clé pour pouvoir utiliser le service. Puis nous construirons notre google map en placant 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’interieur. 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éristique de notre carte (taile,type de carte,etc etc).
Afin d’optimiser le référencement de mon nouveau blog, je suis contraint de tronquer se billet…La suite du tutoriel est présent sur mon nouveau blog (lien direct vers le tutoriel). Désolé pour la gène occasionnée…
Jérôme a dit
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
Guiral antoine a dit
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!
Jérôme a dit
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
Guiral antoine a dit
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
Jérôme a dit
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 !
Guiral antoine a dit
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+
Jérôme a dit
Merci pour ton script ! J’attends tes commentaires sur le mien !
meganic a dit
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?
Guiral antoine a dit
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
meganic a dit
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
Guiral antoine a dit
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)
meganic a dit
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…
meganic a dit
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.
(et non…. rien a voir avec flickr..:):))
je tiendrai au courant quand j’aurai trouve la solution et peut-être aussi qd j’aurai une version montrable de mon projet
Présentation de jesuisné.fr « Antoine Guiral : apprenti du web 2.0 a dit
[...] 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 [...]