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>