11540 sujets

JavaScript, DOM et API Web HTML5

Google Map V3 : Tooltip dans 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.
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".
Quelqu'un peut-il m'aider?
Merci d'avance,
Cordialement,
Trachy
lien : http://www.observatoiredeleau.fr/56/OBSEAU56_00010/googlemap/sites/essai.htm
code:
<!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>
Salut,

Je pense que le problème vient du fait que la tooltip est "appliquée" sur tes liens a.delay avant l'ouverture de l'infoWindow.

La tooltip s'applique uniquement sur les liens qui existent au moment où tu exécute la ligne 
$("a.delay").simpletooltip({hideDelay: 0.5});

Or, le lien de l'infoWindow n'existe pas à ce moment là.

La solution, je pense, serait d'exécuter la ligne ci-dessus juste après l'ouverture de l'infoWindow, c'est-à-dire ici:
google.maps.event.addListener (marker,"click", function() {	
	infowindow.open(mymap);
	// ICI
});

Par contre, si tu as plusieurs infoWindow à terme, il faut éviter que la tooltip s'applique plusieurs fois sur les liens. Il est nécessaire, à mon avis, de les cibler plus précisément (par exemple avec un id qui change pour chaque infoWindow).
Bravo !!! Cela marche parfaitement. Smiley cligne
Je comprends maintenant pourquoi la tooltip ne fonctionnait pas, je craignais que cela soit du à un problème de positionnement au-dessus de la couche infowindow.
J'ai plusieurs infowindows, mais seule une est ouverte à la fois, et le texte présenté en info-bulle est le même. Sinon, effectivement j'affinerais avec un id pour ne pas relancer le "tooltipage" sur l'ensemble des infowindows.
Merci
Philippe77
Sujet clos
Aller à