Objet Google Maps dans une iframe

Bonjour,

J'ai actuellement un site (pour mon groupe de musique), sur une page regroupant nos prochaines dates de concerts, je mets à disposition des visiteurs le plan pour accéder au lieu où l'on joue avec Google map.
Jusqu'ici tout va bien, mais avec du recul et selon l'avis de certains visiteurs, il serait mieux de ne pas avoir les plans affichés dès l'accès à la apge.

J'ai donc cherché à masquer mes plans grâce à :

Code:

---

1 2 3

$(document).ready(function() { $('.PLANS').hide(); });

---

Bon jusque là, pas de problème sauf que lorsque je masque mes div avec un plan google maps, lorsque je les réaffiche (via un bouton qui me fait un show() ou un slideToggle()) le point correspondant à l'adresse n'est plus au centre de ma carte mais en haut à gauche.

Est ce que quelqu'un aurait une idée ?J'ai cherché un peu pour voir s'il n'y avait pas une fonction 'focus()' qui existait pour les object google maps mais si je pouvait ne pas modifié trop de choses dans mon source ce serait cool.

Petite précision : J'ai bien mon iframe (google maps) dans une div que j'affiche ou que je masque).

Avec un setCenter au moment de l'affichage ?

Citation:

---

Envoyé par Bovino

Avec un setCenter au moment de l'affichage ?

---

Euh...oui mais je suppose que ma map doit être construite d'une manière bien précise non ?

EDIT : je crois savoir comment faire ? en gros je dois faire un genre de fonctions centrer() qui va donc créer une map à partir de l'id que j'ai dans mon iframe.
et faire un set center dessus...
Et en gros au moment ou je ré-affiche ma map sur mon site (via mon bouton 'afficher') je lui dis d'appeler cette fonction.

C'est la première idée que j'ai... :)

Est ce qu'il est possible pour moi de faire un setCenter d'une map contenu dans une iframe comme ça :

Code:

---

1 2 3 4 5 6 7 8 9

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=37,+rue+des+Postes++59000,+Lille&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=51.355924,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=37+Rue+des+Postes,+59000+Lille,+Nord,+Nord-Pas-de-Calais,+France&amp;z=14&amp;ll=50.627103,3.057165&amp;output=embed"> </iframe>

---

C'est la carte que je récupére via le bouton "link" sur le site google maps.

Merci d'avance.

Bonjour,

Je remonte la discussion car j'ai moi aussi rencontré le même problème.

Première solution : afficher le iframe dans une div hors champ. Par exemple avec comme css :

Code:

---

1 2 3

position : absolute; top : 0px; left : -2000px;

---

Et l'afficher aux bonnes coordonnées quand on en a besoin. Un peu du bricolage mais ça marche.


De mon côté ça ne me convenait pas, mais en cherchant j'ai trouvé une autre solution. Encore du bricolage, mais ça marche aussi :

Deuxième solution : l'idée c'est de charger l'URL seulement quand on affiche la balise iframe.

1/
remplacer l'attribut SRC par REL dans la balise iframe, et lui rajouter un ID

Code:

---

<iframe id="CarteGoogleMaps" width="500" height="400" rel="http://maps.google.com/maps?f=q&amp;source=s..."></iframe>

---

2/
Un peu de jQuery au moment où on affiche la balise iframe : on affecte la bonne valeur à l'attribut SRC :

Code:

---

1 2	var rel = $("CarteGoogleMaps").attr('rel'); $("CarteGoogleMaps").attr('src',rel);

---

En espérant que ça serve à quelqu'un d'autre ;)

Merci pour cette réponse très intéressante ptimogwai. Toutefois je tenais à signaler que l'attribut "rel" n'est pas valide pour une balise <iframe/>.

Du coup je pense qu'il serait plus judicieux de mettre le lien dans une balise <span/> et d'ensuite récupérer le contenu de cette span pour l'attribut "src" de l'<iframe/>.

Code:

---

1 2 3

var mapsrc = $("#span").text(); $("#iframeGoogleMaps").attr('src',mapsrc);

---

Ou bien sûr il est également possible si vous disposez directement de l'url de procéder comme cela

Code:

---

1 2	$("#iframeGoogleMaps").attr('src','votre url');

---