jquery + thickbox + google maps API
By Fran6t on jeudi, 13 septembre 2007, 22:46 - Webmaster - Permalink
*** Modif du 5/10/07, à priori il est possible de rendre jquery avec l'api google map en commentant quelques lignes de code voir ici
Je rencontre un problème que je n'arrive pas à solutionner,
malheureusement je ne suis pas assez calé en javascript et ajax pour même commencer à comprendre d'où pourrais provenir le problème et le solutionner.
Tout d'abord l'erreur que je rencontre, sur www.mp82.com je suis en train de mettre en place la géolocatisation des sites web du Tarn-Et-Garonne. Au départ j'avais une carte toute vilaine que je souhaite même que j'ai remplacé par l'utilisation des services google.
Je souhaite que lors d'un clique sur le lien "où" une sorte de POPUP s'affiche contenant alors la carte du Tarn-Et-Garonne avec un niveau de zoom adhoc et l'affichage d'un marqueur couplé à une bulle.
Le fonctionnement avec la librairie jquery 1.1.2 et thickbox 3.1 est presque satisfaisant sous IE et catastrophique sous Firefox la POPUP s'ouvre, la carte commence à s'afficher puis patatraque affichage d'une partie seulement de la carte. Muni de FireBug voici l'erreur que je rencontre :
uncaught exception: Exception... "Component returned fa..." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.google.com/intl/fr_ALL/mapfiles/88/maps2.api/main.js :: Gm :: line 1192" data: no]
Lorsque je regarde la ligne en cause je vois :
function Gm(a,b,c){
var d=c||screen.width,e=y("div",window.document.body,new o(-screen.width,-screen.height),new s(d,screen.height)),f=;
for(var g=0;g<l(a);g++){ var h=y("div",e,o.ORIGIN); xb(h,ag); f.push(h) } ...
Pour le peu que je comprend il s'agit d'un problème pour trouver la taille de l'iframe utilisée par le système de popup de thickbox, ne voyant pas comment résoudre cela j'ai donc chercher un autre moyen d'arriver à mes fins et je me suis donc rabattu sur Smoothbox, la syntaxe étant compatible il m'a fallut juste remplacer la class de mes liens class="thickbox" par class="smoothbox" et une peu l'appel et depuis plus d'erreur.
J'ai découvert aussi la philosophie de Mootools et du choix des composants pour faire fonctionner smoothboc pas simple non plus pour une première approche après une fois la philosophie comprise c'est ok.
Vous pouvez voir ce que cela donne par exemple avec les sites en rapport avec la voiture dans le Tarn-Et-Garonne, cliquez sur le lien Où mais aussi si vous voulez voir un tracé du département sur le petit gif annimé.
Merci aux auteurs des lib tel que jquery, mootools, thickbox et smoothbox pour leur travail gigantesque.
Bon aller j'y retourne il me reste à régler un problème avec la petite annimation de chargement de la popup
Ps: j'ai perdu la fonctionnalité de la touche ESC qui permettait de fermer la POPUP mais c'est pas grave.
A+
Commentaires
Le problème vient en fait de la gestion du "onLoad". En effet, l'iframe est lancée et "loadée" de façon cachée avant d'être affichée par la suite via la fonction "tb_showIframe()".
Google map ne se cale donc pas proprement dans une iframe chargée ainsi.
La solution que j'ai trouvée consiste au rajout d'une variable "randomId" correspondant au random utilisé pour l'attribut name de l'iframe affichée.
var randomid = Math.round(Math.random()*1000);
Ensuite, on doit modifier l'attribut name des iframes créées via thickbox.js.
Enfin, il suffit de lancer une fonction "onLoad()" (si elle existe) dans cette iframe. Voici la fonction tb_showIframe() réécrite :
//helper functions below
function tb_showIframe(){
$("#TB_load").remove();
$("#TB_window").css({display:"block"});
if (eval('typeof TB_iframeContent'+randomid+'.onLoad!="undefined"')) // if function exists
eval('TB_iframeContent'+randomid+'.onLoad()');
}