Tooltip jquery à l'intérieur d'une infowindow
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:
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> |
