[Google Maps] Tooltip jquery à l'intérieur d'une infowindow [Résolu]

philou8 · 05/01/2013, 13h39

Bonjour,
je désire mettre un tooltip jqueryà l'intérieur d'une Infowindow Google Map V3,
Ce tooltip fonctionne sur la carte, mais pas à l'intérieur de l'InfoWindow.
Quelqu'un peut-il m'aider.
lien : http://www.observatoiredeleau.fr/56/...ites/essai.htm
Si je survole "voir" au-desus de la carte le tooltip s'affiche, ce n'est pas le cas dans l'infowindow qui apparait lorsque l'on clique sur le marqueur "photo".
Merci d'avance,
Cordialement,
Trachy
Voici le code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps Markers</title>
 
    <style type="text/css">
	#map{
	position:absolute;top:10px;left:10px;width:1024px; height: 650px
	}
	#essai{
	position:absolute;top:500px;left:200px;width:150px; height: 24px;
	z-index: 3;
	}
	#infoWindow a {
	color:white;
	}
	.class_infoWindow{
	padding:2px;
	margin:0px;
	height:60px;
	color:white;
	background-color:green;
	}
	.tooltip{width:200px;margin:0;padding:5px;font-size:11px;color:#666;background:#fff;border:5px solid #ccc;}
	.tooltip p{margin:0;text-align:justify;}
	#tooltip_id{background:#fff;border-color:#8c6;}
   </style>
 <!-- script Google Maps -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry"></script>
 <!-- script Jquery -->
<script type="text/javascript" src="../libjs/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../libjs/jquery/jquery.simpletooltip-min.js"></script>
    <script type="text/javascript">
	var latcentrecarto = 47.58879945676841;  
              var longcentrecarto = -2.8348159790039062;
	var centreCarte = new google.maps.LatLng(latcentrecarto, longcentrecarto);
              var zoominitialcarto = 11;
	var image_marker= "images/icones_site/photo.jpg";
	var mymap;
         // fonction jquery tooltip
    $(function(){
	$("a.delay").simpletooltip({hideDelay: 0.5});
	});
   function construction_carte() {
	var optionsCarte = {
	  zoom: zoominitialcarto,
                center: centreCarte,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
	  mapTypeControl : true
	};
     	 mymap = new google.maps.Map(document.getElementById("map"), optionsCarte);
	}
   function placement_infowindow_marqueur() {
		var contentString ='<div id="infoWindow" class="class_infoWindow"><p>Je vais  ...  <a href="#tooltip_id" class="delay">voir</a></p></div>';
		var optionsWindow = {
			content :contentString ,
			position : centreCarte,
			zIndex : 3,
			};
		var infowindow=new google.maps.InfoWindow(optionsWindow);
		var optionsMarqueur = {
			icon : image_marker,
			position : centreCarte,
			zIndex : 3,
			};
		var marker=new google.maps.Marker(optionsMarqueur);
		marker.setMap(mymap);
		google.maps.event.addListener (marker,"click", function() {	
		infowindow.open(mymap);});
	}
  function load() {
	construction_carte();
	placement_infowindow_marqueur();
           }
</script>	
</head>
  <body onload="load()">
  	<div id="map"></div>
	<div id="tooltip_id" class="tooltip"><p>nom de lieu, code carte, ou champ vide pour position actuelle (veuillez actualisez votre position en cliquant sur le bouton situé sous la carte à droite)</p></div>
	<div id="essai"><p>Je vais  ...  <a href="#tooltip_id" class="delay">voir</a></p></div>
</body>
</html>

NoSmoking · 05/01/2013, 15h18

Bonjour,
ce qu'il faut voir c'est que le contenu de ton infoWindow n'est que du code HTML dans du code javascript.

Lorsque la page est chargée le "tootippeur" passe est examine les liens pour savoir si ils sont concernés par le "tooltippage", il ne rencontre pas celui qui est noyé dans du code javascript car il ne fait pas parti du DOM.

question "tootippeur" avec 2p ou un seul ?

philou8 · 05/01/2013, 18h10

Merci de m'avoir fait comprendre la raison du dysfonctionnement.
A toute fins utiles, si cela peut aider d'autres internautes, voici la solution qui m'a été soufflée dans un autre forum :

On rééxécute la fonction tooltip, juste après l'affichage de l'infowindow

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
google.maps.event.addListener (marker,"click", function() {	
		infowindow.open(mymap);
		$("a.delay").simpletooltip({hideDelay: 0.5});
		});

un p ou 2 p c'est au choix, en francisant j'en mettrais qu'un "tooltipage"

NoSmoking · 05/01/2013, 19h05

Bien que techniquement satisfaisante, cela marche, la solution adoptée n'est quand même pas très propre, sur chaque click on exécute la fonction.

Il existe une solution bien plus propre, pas Ajax

, qui consiste à utiliser comme paramètre au content de l'InfoWindow un node et non une string.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var infowindow=new google.maps.InfoWindow({
    'content' : document.getElementById('photo_1'),
    'position' : centreCarte,
    'zIndex' : 3  // au passage pas de virgule après la dernière déclaration
  });

et dans la page on retrouve par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="mes_infos" style="display:none">
  <div id="photo_1">
    <div id="tooltip_photo_1" class="tooltip">Le commentaire sur la photo #1</div>
    <div id="infoWindow" class="class_infoWindow">
      <p>Je vais ... <a href="#tooltip_photo_1" class="delay">voir</a></p>
    </div>
  </div>
</div>

la DIV globale est en display:none pour ne pas apparaître dans la page et contient les contenus des InfoWindow.

De la sorte au parsage de la page le tooltipeur fait son oeuvre sur les liens contenus dans la page y compris ceux des futures InfoWindow.

Cette méthode présente également l'avantage de pouvoir mettre un contenu "propre", facilement rédigé et visible pour peu que l'on supprime le display:none, ce qui représente un très bon débogage.

Voilà pour le principe et merci pour le 1p

PS : penses au

philou8 · 13/01/2013, 18h34

Je te remercie pour ta réponse Nosmoking, je me souviendrai de la possibilité de mettre un node au lieu d'une string dans l'infoWindow.
Cependant, j'ai décrit une version simplifiée de mon application, et bien d'autres éléments de l'infowindow sont produits dynamiquement, par ailleur le fameux lien apparait dans une extension de l'infowindow qui est effacée dès que l'on agit sur un sélecteur de marqueur, donc le lien n'est présent qu'une seule fois dans le code à chaque parse, et je n'ai pas de problème de temps de réponse.
Le string tooltip1 quant à lui est déclaré en variable globale dans le head donc facilement modifiable.
Pour des raisons de lisibilité et de maintenabilité, je vais m'en tenir à la solution que je t'ai citée.
Encore merci pour ta réponse,
Trachy

05/01/2013, 15h18	#2
NoSmoking Modérateur Inscription : janvier 2011 Messages : 5 105 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 5 105 Points : 8 822 Points : 8 822	Bonjour, ce qu'il faut voir c'est que le contenu de ton infoWindow n'est que du code HTML dans du code javascript. Lorsque la page est chargée le "tootippeur" passe est examine les liens pour savoir si ils sont concernés par le "tooltippage", il ne rencontre pas celui qui est noyé dans du code javascript car il ne fait pas parti du DOM. question "tootippeur" avec 2p ou un seul ?
	00

13/01/2013, 18h34	#5
philou8 Candidat au titre de Membre du Club Inscription : novembre 2003 Messages : 68 Détails du profil Informations forums : Inscription : novembre 2003 Messages : 68 Points : 13 Points : 13	Je te remercie pour ta réponse Nosmoking, je me souviendrai de la possibilité de mettre un node au lieu d'une string dans l'infoWindow. Cependant, j'ai décrit une version simplifiée de mon application, et bien d'autres éléments de l'infowindow sont produits dynamiquement, par ailleur le fameux lien apparait dans une extension de l'infowindow qui est effacée dès que l'on agit sur un sélecteur de marqueur, donc le lien n'est présent qu'une seule fois dans le code à chaque parse, et je n'ai pas de problème de temps de réponse. Le string tooltip1 quant à lui est déclaré en variable globale dans le head donc facilement modifiable. Pour des raisons de lisibilité et de maintenabilité, je vais m'en tenir à la solution que je t'ai citée. Encore merci pour ta réponse, Trachy
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email