Google map API V3 dimensionnement infowindow

Signaler
Messages postés
6
Date d'inscription
samedi 20 mars 2010
Statut
Membre
Dernière intervention
16 février 2012
-
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

.......


-j'ai défini un tableau inclus

.......



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" 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="<li value='1'></li><li value='2'></li><li value='3'></li><li value='4'></li><li value='5'></li>";

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:"", 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 = "
, 

";
    
        
    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>

  



</html>