Google map API V3 dimensionnement infowindow

Question

philippe77

16 Feb 2012 à 22:42

Bonsoir,

Voulant fixer la taille de l'infowindow, puisque l'on ne peut paramétrer que la largeur max, j'ai essayé de le faire par l'une des deux méthodes ci-dessous, mais en vain:

- j'ai défini un html du type
<div id='content" style = "width:100px;height:100px">.......</div>

-j'ai défini un tableau inclus
<div id='content"><table><tr height=100px><td width=100px>.......</td></tr></table></div>

N'obtenant pas le résultat attendu, j'ai finallement opté pour une solution consistant à introduire une image (ou du texte) avec la hauteur désirée.

Pour faire simple, comment procéder ?

Question complémentaire : Un clic sur l'image "..." provoque l'apparition d'une liste déroulante d'images. Comment faire en sorte que la barre de défilement des images
ne joue pas également sur le déplacement du contenu de l'infowindow

Merci d'avance
Trachy

Voici le lien :

http://www.cybtechnologie.com/essai/essaiPOPUP.htm

Voici le code : (le même que pour mon précédent post)


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- script jQuery liste déroulante icones -->
<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery.js" ></script>
	<script type="text/javascript" src="libraryjQuery/customdropdown/js/jquery-dropdown.js" ></script>
<!-- Feuilles de style jQuery liste déroulante icones-->
<link rel="stylesheet" type="text/css" href="libraryjQuery/customdropdown/customdropdown.css" />


<script type="text/javascript">

var strsitesweb="<ul><li value='1'><img src='mairie.jpg' alt='http://www.toulouse.fr' title='http://www.toulouse.fr' /></li><li value='2'><img src='ot.jpg' alt='http://www.tourisme.fr' title='http://www.tourisme.fr' /></li><li value='3'><img src='abritel.jpg' alt='http://www.abritel.fr' title='http://www.abritel.fr' /></li><li value='4'><img src='wikipedia.jpg' alt='http://www.wikipedia.fr' title='http://www.wikipedia.fr' /></li><li value='5'><img src='wikitravel.jpg' alt='http://www.wikitravel.fr' title='http://www.wikitravel.fr' /></li></ul>";

function popup(url){
	window.open(url,'paysagesdumonde','toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes,width=1170,height=600,screenx=0,screenY=0,left=0,top=0');
	return;
	}

  function selecteur_icones(){
	$(function(){
	document.getElementById('id_select_icones').innerHTML = strsitesweb;
	$("#id_select_icones ul:eq(0)").imgDropDown({title:"<img id='image_selected' src='points.jpg'  alt='autres sites' title='autres sites'/>", callback:f});});
	}

 function f(content)
      //fonction utilisée pour présenter le site web à partir du sélecteur d'icônes - récupération du nom de l'url dans "content" par traitement de chaine de caractères
	{var debut = content.html().indexOf("http");
	var fin = content.html().indexOf(" ",debut);
	var web_site = content.html().substring(debut,fin);
	// selon navigateur le nom est terminé par une apostrophe ou un guillemet
	if((web_site.charAt(web_site.length - 1)=='"')||(web_site.charAt(web_site.length - 1)=="'")){web_site=web_site.substring(0,web_site.length-1)};
	popup(web_site);
	} 

function initialize() {
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
   
  var contentString = "<div id='content' ><table><tr><td><img src='australie.jpg' /></td><td valign='top'><div id='id_select_icones'><a href='#' onmouseover='javascript:selecteur_icones();'><img src='points.jpg'   border='1' /></a></div></td></tr></table></div>";
    
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>
</html>

Sujet clos