Insérer une carte google maps
EnglishPas le code iframe
Pour intégrer vos cartes dans votre site web, google map vous livre un code iframe, que vous copiez dans le code html de votre page si vous avez un site. Mais ça ne marche pas avec wordpress car, pour des raisons générales de sécurité, il ne faut pas accepter l’inclusion de iframe dans vos articles. Heureusement il existe un plugin qui nous arrange ça…
Code iframe à ne pas utiliser
Maps API key
Il faut d’abord vous créer un Google Maps API key. Google vous donnera votre clé et un exemple de code html pour intégrer votre carte dans votre page, mais, là encore, on n’aura pas besoin de ce code:
Code fourni pour google lors de l'inscription
Le plugin
Le plugin en question s’appelle XML Google Maps WordPress Plugin, on le trouve aussi dans le répertoire de plugins de WordPress.
Après l’avoir installé, allez dans sa configuration pour coller votre clé google maps + quelques réglages de cosmétique.
Télécharger le kml de la carte
Ensuite, dans google map, dans « vos cartes », vous visualisez une carte en particulier, et au dessus de la carte il y a un menu « Afficher dans google earth ». Quand vous cliquez dessus, ça vous télécharge un fichier .kml sur votre ordin. Vous pouvez renommer le fichier ma_carte.kml
Télécharger le fichier klm
Créer un nouvel article
Vous créez un nouvel article, vous lui uploadez ce fichier klm dans vos médias et copier seulement son url, exemple: http://www.woodymood-dev.net/cms/wordpress/wp-content/uploads/2009/02/woodymood.kml, donc sans faire « insérer dans l’article ».
Faire le lien
Ensuite il n’y a plus qu’à faire un lien html vers ce média, dans le texte de votre article, et le plugin le remplacera par la carte.
Le lien ressemble à ça, dans le code HTML de l’article:
<a href="http://www.woodymood-dev.net/cms/wordpress/wp-content/uploads/2009/02/woodymood.kml">carte</a>
Exemple
Notez enfin que vous pouvez aussi intégrer des cartes google maps dans vos articles via le plugin Apture.
Suggestions de lecture
Partagez avec les autres
Ça vous a plu?
Ne partez pas sans laisser votre appréciation!
19 vote(s) 
Loading ...
18 commentaires
Classé dans: 
Mots clés: 
7618 visiteurs
Mise à jour:
22.11.2009
Auteur: 
Loading ...
Christophe Quinzoni (11)
Alex (9)
laztec (6)
Sebastien (6)
anahita (4)
Crunch (4)
@gwenjaz
Est il possible d’avoir l’adresse de votre page pour voir la carte et le bouton full screen?
Sinon pour la bordure, malheureusement elle est fixée en dur dans le fichier du plugin xmlgooglemaps.php, ligne 717, un ajout dans la css du thème ne pourra pas changer la bordure, seul un jquery pourrait le faire proprement, sinon hacker le fichier du plugin
Like or Dislike:
0 
0
Bonjour,
Ma configuration WP actuelle
Version de WordPress : WordPress 2.9.1
Version de PHP/MySQL : mysql5-10
Thème utilisé : atahualpa
Extensions en place : cformsII (Version 11.3), XML Google Maps (Version 1.12.1)
Nom de l’hébergeur : OVH
Problème(s) rencontré(s) :
J’utilise l’extension XML Google Maps, les cartes s’affichent bien dans mes pages mais le lien « full screen » s’affiche en plein milieu de la carte au lieu de s’afficher en bas. Comment puis-je régler ce paramètre ?
Par ailleurs, je cherche à ajouter une bordure autour de la carte mais je n’y parviens pas. Quelle balise dois-je modifier ?
Merci d’avance
Like or Dislike:
0 
0
Bonjour,
J’ai trouvé ma réponse…
Like or Dislike:
0 
0
Bonjour,
Etape 3 : j’ai bien téléchargé le plug in sur mon site, et vous indiquer ensuite qu’il faut « coller » l’API key. Où faut-il la coller ?
Merci de votre aide
Like or Dislike:
0 
0
@Porcheret Laurent
J’ai aussi eu cette erreur au début.
En fait quand j’ai Upload le fichier et que j’allais dans la bibliothèque de média pour savoir ou il se trouvait, l’adresse indiqué était
http://site.fr/wp-content/uploads/fichier.kml
Or en réalité le fichier ne se trouvait pas la car je n’avais pas de dossier Upload. il se trouvait ici
http://site.fr/wp-content/fichier.kml.
Il m’a juste suffit de créer un dossier uploads et de mettre le fichier dedans pour que tout fonctionne.
Sinon pour savoir si ton lien fonctionne il te faut
ouvrir le fichier kml
copier l’adresse (entre les balises href)
virer la chaine &output=kml à la fin de l’adresse
copier l’adresse obtenu dans un navigateur et tu verra si ton adresse marche.
Tu peux aussi mettre directement cette adresse dans ton article, ça fonctionne aussi.
Like or Dislike:
0 
0
@Anthony http://petitsoldat.celeonet.fr/annuaire/?page_id=3&link=11
Merci pour votre aide.
Like or Dislike:
0 
0
@Xavier
S’il y a une carte c’est que le plugin a interprété le lien… peut être un problème dans le klm? Quel est l’adresse de votre page?
Like or Dislike:
0 
0
Bonjour,
Merci pour ce plugin et l’explication détaillée.
J’ai un blog WP hébergé sur mon serveur, donc à priori pas de contre-indication jusque là.
J’ai suivi toutes les étapes, mais lorsque je publie mon lien, s’affiche bien une carte, mais de trois mappes monde cote à cote (sans zoom donc), avec en dessous mon lien texte ‘carte’, permettant soit d’afficher le code kml, soit de télécharger le fichier.
Le module est bien activé, il ne fait pas le lien avec les coordonnées.
Saurez vous m’aider ? Je croise les doigts !
Like or Dislike:
0 
0
Merci pour ce tuto !!!
Pour ceux qui ont galéré comme moi : à la dernière partie lorsque vous insérer le code html /lien de la carte/ dans votre message, n’oubliez pas de passer en mode HTML dans l’éditeur du texte et non VISUEL, sinon ça ne marche pas.
Bon courage !
Like or Dislike:
1 
0
Si j’essaye d’atteindre http://association.formageo.free.fr/wp-content/uploads/Formageo-localisation.kml, ça me fait « page introuvable ». Vous êtes sûr que le fichier est bien arrivé à cet emplacement ? A voir sur le ftp.
Like or Dislike:
0 
0
Bonjour,
J’ai un problème d’affichage de la carte. A la place est affiché ce texte :
Could not load the file with the GGeoXML Object! Check the file, the Google Maps API says that there is an error! Validate your links or files with the Validators from http://googlegeodevelopers.blogspot.com/2008/06/new-service-released-kml-validator.html or try enter the URL to your file directly in the search field of http://maps.google.com!
http://association.formageo.free.fr/wp-content/uploads/Formageo-localisation.kml
Qu’en pensez-vous ?
Merci d’avance pour votre aide
Laurent
Like or Dislike:
0 
0
@jean cazz
Est ce que vous pouvez vérifier que le code du lien est bien comme décrit dans cet article (que je viens de préciser) ?
Like or Dislike:
0 
0
bonjour
je bloque completement au dernier virage ! cette histoire de média me rend fou … j’ai bien uploder le média dans ma bibliotheque mais losque je l’insere dans un article ou une page , cela s’affiche en texte et avec un lien qui donne sur une page blanche avec ce code :
Donc AU SECOURS !!!!
Like or Dislike:
0 
0
Bonjour,
le code en question est tout simplement celui d’un lien classique en html avec la balise a, lien qui est pointé sur le fichier klm.
Like or Dislike:
0 
0
Bonjour premièrement et merci pour ce post qui explique comment marche ce fichu pluggin.
Par contre j’ai un petit souci, j’ai fait tout ce qui été indiqués,mais je bloque au moment ou je doit inclure le lien dans l’article, quel code avez vous utilisez pour que la carte s’affiche?
En vous remerciant,
Alex.
Like or Dislike:
0 
0
Merci pour ce post, c’est ce que je recherchai
Like or Dislike:
0 
0
Bonjour,
on ne peut malheureusement pas installer de plugins sur un blog hebergé sur wordpress.com, voir http://support.wordpress.com/plugins/.
L’article ci dessus s’adresse aux personnes qui hébergent leur blog… désolé :O(
Y a t’il une solution quand même .. je ne sais pas, c’est une bonne question !
Like or Dislike:
0 
0
Bonjour,
J’ai bien télécharger le famuex plug-ins trouvé sur wordpress.org. Par contre il me demande de l’uploader dans mon dossier plug-in: c’est quoi mon dossier plug-in et je le trouve où?
Au fait je cherche à poster la carte suivante sur mon site:
http://macantinebio.wordpress.com/carte-de-france-cantines-bio/
D’avance merci.
Vincent
Like or Dislike:
0 
0