Bonjour,
Un nouveau problème se pose à moi pour la personnalisation des infowindows... ca fait quelques heures que je tourne en rond et comme je n'ai rien trouvé ici sur l'exemple ci dessous, je demande... le problème vous sautera peut etre aux yeux !

Je souhaite utiliser les "infobox" en tant qu'infowindows, comme dans cet exemple :

http://jsfiddle.net/ccJ9p/7/

J'essai donc d'adapter ce code au miens en commençant par y insérer ma boucle et mon fichier xml mais je bloque.
Un seul marker s'affiche et aucune infobox n'apparait...

Voici mon code :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
86
87
var newMarkers = [], marker;
 
///////////////////////// Affichage de la carte ///////////////////////////////////////////////////////////////////////////
 
function showMap() {
    document.getElementById("map").style.display = "block";
    var mapOptions = {
        zoom: 6,
	minZoom: 3,
        center : new google.maps.LatLng(52.25, 10.48),
        mapTypeId: google.maps.MapTypeId.ROADMAP, //On indique qu'il s'agit d'une "carte routière"
	zoomControlOptions: {
           style: google.maps.ZoomControlStyle.LARGE,
           position: google.maps.ControlPosition.RIGHT_BOTTOM
    	},
	panControl: false,
	mapTypeControl: false,
	streetViewControl: false,
    }; // var mapOptions
 
        map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
	navigator.geolocation.getCurrentPosition(showPosition);
 
///////////
 
	downloadUrl("Amaptest.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var id = markers[i].getAttribute("id");
	  var nom = markers[i].getAttribute("pseudo");
	  var avatar = markers[i].getAttribute("avatar");
          var ville = markers[i].getAttribute("ville");
	  var zipcode = markers[i].getAttribute("zipcode");
	  var pays = markers[i].getAttribute("pays");
          var groupe = markers[i].getAttribute("groupe");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html =    '<a href="profil.php?ID='+ id +'" style="color: rgba(0,0,0,0.8)"><div style="text-align: left; font-family: arial; font-size: 12px;">'+
		  				'<img src="http://localhost:8888/mobile/photos/avatars/' + avatar + '" class="avatar" alt="avatar" style="margin: 0 10px 0 0;">' +
		  				"<b>" + nom + "</b> <br/>" + ville +", "+ zipcode +" (" + pays +")" +
						'</div></a>';
 
	var marker = createMarker(point, nom, groupe);  
 
	boxText = document.createElement("div"),
	boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
        boxText.innerHTML = html;
 
        infoboxOptions = {
                content: boxText,
                disableAutoPan: false,
                maxWidth: 0,
                pixelOffset: new google.maps.Size(-140, 0),
                zIndex: null,
                boxStyle: {
                    background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
                    opacity: 0.75,
                    width: "280px"
                },
                closeBoxMargin: "12px 4px 2px 2px",
                closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
          };          
 
            //Define the infobox & Open box when page is loaded
          newMarkers[i].infobox = new InfoBox(infoboxOptions);
          newMarkers[i].infobox.open(map, marker);
 
	google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    newMarkers[i].infobox.open(map, this);
                    map.panTo(latlng);
                } // return
          })(marker, i)); // addlistener
 
        }// for
      });// downloadUrl
 
	return newMarkers;  
 
}// ShowMap

Le code initial est visible dans le lien cité plus haut dans mon message.

Je n'ai pas trouvé d'autre exemple plus proche de ce que je recherche... si vous avez réalisé ce type d'infobox, n'hésitez pas a nous montrer ca !

Merci,
Florian