Aller au contenu

Google Map et liens


titiping

Sujets conseillés

Bonjour,

Je tente de mettre en place un petit site sur les hymnes nationaux. Mais voilà après avoir terminé la partie design je m'aperçois que quelque chose ne colle pas au niveau du "futur" contenu. Le problème est le suivant : lorsque je clique sur un des "post-it" de la Google Map affichée sur mon site et que je clique sur le lien dans la petite fenêtre qui apparait, eh bien au lieu d'ouvrir le lien dans une nouvelle page , il s'ouvre dans l'iframe de la Google Map. Cela a pour conséquence de dupliquer une partie de mon site (son logo, etc), c'est très moche ! (Le souci n'a pas lieu lorsque que je suis connecté à mon compte Google).

Voici le lien pour faire le test : http://www.hymnes-nationaux.com

(Pour tester choisir la France car je n'ai pas encore fait les autres pays).

Avez-vous une solution ? Ou une alternative à Google Map ?

Merci :-)

Anthony

Lien vers le commentaire
Partager sur d’autres sites

J'ai jeté un oeil à l'API google map, d'abord je ne suis pas certain de tout comprendre, et puis pour l'intégration en javascript il faut mettre du code entre les balises <head>. Le problème c'est qu'ensuite pour chaque page des pays il y aura une autre carte à afficher, et donc un nouveau code à mettre entre les balises <head>. Mais j'utilise Wordpress, je ne peux donc mettre qu'un seul et unique code entre ces balises... il me semble... :-p

Lien vers le commentaire
Partager sur d’autres sites

Avec l'API V3 il suffit de mettre dans le head de la page la balise suivante :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Ce sera le même pour toutes les pages sur lesquelles tu voudras insérer une carte, indépendamment du domaine ou de la place de la page dans l'arborescence du site. S'il n'y a pas de carte le code ne fera rien, tu dois donc pouvoir l'insérer dans un fichier template de WP pour l'appliquer au <head> de tout le site ;)

Ensuite, pour insérer une carte, il faut suivre ce tutoriel, tu verras que c'est assez simple.

J'utilise beaucoup ce type de code sur le site de mon profil dans la partie tourisme, ce site est propulsé par un CMS très similaire à Wordpress ;)

Lien vers le commentaire
Partager sur d’autres sites

Nouvelle question :-)

J'ai trouvé un site très bien fait avec de bon tutoriels : http://google-maps-api-version-3.touraineverte.com/fr/creer-une-carte-avec-api-google-maps-version-3.html

Sur cette page, quand on arrive à la dernière étape de création de carte on s'aperçoit bien que le script que l'on met entre les balises <head> donne les caractéristiques d'une carte en particulier.

Cela rejoint ce que je disais plus haut avec le souci des balises <head> communes à toutes les pages de wordpress...

(Je vais y arriver héhé)

Lien vers le commentaire
Partager sur d’autres sites

Il y a toujours plusieurs façons de faire les choses, mais je t'assure que seul l'appel au script principal de l'API est nécessairement dans le <head> (avec les styles nécessaires pour la carte). Tout le reste peut-être inséré là où tu le veux dans le <body>.

Par exemple ici, dans un exemple très simple avec un seul marker, les paramètres d'initialisation de la carte sont dans le bloc "post-content", et le script est lancé à la fin du chargement de la page par un appel jQuery. Le <head> ne contient donc rien de particulier à cette carte ;)

Lien vers le commentaire
Partager sur d’autres sites

mais non, ce n'est pas forcement obligatoire de mettre le script dans header

Tu as raison effectivement Dadou, je suis allé un peu vite dans l'explication. En fait on met habituellement l'appel au script externe dans le head afin de bénéficier de la mise en cache par le navigateur, c'est la seule raison objective.

Lien vers le commentaire
Partager sur d’autres sites

D'accord, je vais m'y pencher de plus près dans les prochains jours. C'est tout nouveau pour moi, alors je patauge, mais vos conseils me sont déjà d'une grande aide.

Lien vers le commentaire
Partager sur d’autres sites

  • 2 semaines plus tard...
Posté (modifié)

Alors, j'ai plutôt bien avancé. J'arrive à afficher une carte avec un marker et son infobulle sur une simple page html.

Par contre, lorsque je tente sous wordpress la carte ne s'affiche pas.

Je mets pourtant bien ce qui suit entre les balises <head> de mon thème wordpress :

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Et tout le reste du code je le mets dans mon article wordpress.

Avez-vous une explication ? :-)

Page html simple : http://www.hymnes-nationaux.com/test/test.html'> http://www.hymnes-nationaux.com/test/test.html

Mon site sous wordpress : http://www.hymnes-nationaux.com

Modifié par titiping
Lien vers le commentaire
Partager sur d’autres sites

Le code n'est sans doute pas similaire entre les deux exemples : en effet en utilisant Firebug sur ta page Wordpress j'ai une erreur :

unterminated string literal

et la ligne indiquée contient :

var contenuInfoBulle = '
<div id="conteneurInfoBulle">' +

Ce saut de ligne n'est pas présent dans le code de ton exemple simple, c'est peut-être l'origine du souci ?

Lien vers le commentaire
Partager sur d’autres sites

Le code était pourtant similaire...

J'ai tout de même réussi à afficher la carte sous wordpress en utilisant le "Inline Javascript Plugin" qui permet de mettre du code javascript dans les articles et les pages.

Ça avance donc à grand pas !!! Maintenant reste à ajouter du contenu au site, cela va être long, mais si je finis par connaitre un peu mieux les pays du monde je n'aurai pas tout perdu :-)

Encore merci pour votre précieuse aide.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...