Google Map API V3-JQUERY : Popup passant sans raison apparente en arrière plan s

Signaler
Messages postés
6
Date d'inscription
samedi 20 mars 2010
Statut
Membre
Dernière intervention
16 février 2012
-
Bonsoir,

Voci une application simplifiée illustrant le problème.
Une Infowindow Google Map contient une liste déroulante d'images construite avec Jquery.
Un clic sur l'une de ces images provoque l'ouverture d'une fenêtre.
Cette fenêtre reste sur le devant avec Firefox et Opéra, mais passe en arrière plan automatiquement avec IE ou Chrome.
Pouvez-vous me dire pourquoi, et me donner une solution qui me permettrait de maintenir la fenêtre ouverte sur le devant avec IE et Chrome (sachant que je ne peut agir sur le contenu de l'URL affiché).

Merci d'avance
Trachy

Voici le lien : (cliquez sur le Marker, puis survolez et cliquez dans l'image " ... " pour faire apparaitre la liste déroulante d'images, puis cliquez dans l'une des imapes pour faire apparaitre la fenêtre)

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

Voici le code :
<!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>