Création infobox

**Lazaa** · 24/05/2013, 09h45

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

Invité · 24/05/2013, 16h21

Bonjour,

Voir ICI. Bon, pas très propre mais c'est un début.

A+

Invité · 24/05/2013, 19h40

Re,

Une mouture plus propre et plus compréhensive: ICI

Bye

**NoSmoking** · 24/05/2013, 20h15

Bonjour,

Envoyé par Lazaa

Un seul marker s'affiche et aucune infobox n'apparait...

je dirais donc que une fois tracé ton premier marker ton script plante.

La partie downloadUrl est-elle résolue, attendu que l'on la retrouve dans cette discussion

http://www.developpez.net/forums/d13...r-du-viewport/

**Lazaa** · 25/05/2013, 13h55

Merci pour vos réponses !
J'ai résolu les problèmes... le premier était que je n'avais pas commencé par déclarer le tableau utilisé plus loin dans le code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var newMarkers = [], marker;

Ensuite, j'avais un problème qui venait du HTML ou j'avais oublié de changé le nom de la fonction onload dans la balise <body>

Pour ceux que cela intéresse voici donc le code fonctionnel :

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
var map = null;
var newMarkers = [], marker;
var html = [];
 
//////// Affichage de la carte ////////////////
 
 
function initialize() {
    var markers ="";
    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); 	
 
        downloadUrl("donnees_xml.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 pseudo = markers[i].getAttribute("pseudo");
	  var nom = markers[i].getAttribute("nom");
	  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")));
	  // Contenu des différentes infobox	  
          var html_groupe1 =    'contenu 1';	
	  var html_groupe2 = ' contenu 2';
	  // insertion des contenue infobox dans un tableau associatif
	  var html = [ html_membre, html_shop];	
	  html['groupe1'] = html_groupe1; 
	  html['grouped'] = html_groupe2;			
	  // icones marker perso
	  var icon = customIcons[groupe] || {};
	  // définition des markers
    	  var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
    	  }); // var marker
 
	  marker.mycategory = groupe;                                 
   	  marker.myname = name;
	  newMarkers.push(marker);  
	  // définition et style des infobox
          boxText = document.createElement("div"),
	  boxText.style.cssText = "border: 0px ridge black; margin-top: 8px; background: rgba(0,0,0,0.7); box-shadow: inset 0 40px 20px -20px rgba(255,255,255,0.2);color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
          boxText.innerHTML = html[groupe];
 
          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: 1,
                    width: "280px"
                },
                closeBoxMargin: "12px 4px 2px 2px",
                closeBoxURL: "http://localhost:8888/mobile/images/close.png",
                infoBoxClearance: new google.maps.Size(1, 1),
                isHidden: false,
                pane: "floatPane",
                enableEventPropagation: false
            };
 
          newMarkers[i].infobox = new InfoBox(infoboxOptions);
 
	  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
		   var point = new google.maps.LatLng(
             			 parseFloat(markers[i].getAttribute("lat")),
             			 parseFloat(markers[i].getAttribute("lng")));
                    newMarkers[i].infobox.open(map, this);
                    map.panTo(markerData[i].point);
                } // return
          })(marker, i)); // addlistener
 
        }// for
      }); // downloadUrl
 
    return newMarkers;
 
} // initialize

Sinon pour répondre à NoSmoking concernant la résolution du probleme du downloadUrl, j'avais mis ca de coté le temps de m'occuper de mes infoboxs donc je suis reparti de mon code fonctionnel où la map charge tous les markers présents.

Mais maintenant que c'est OK pour les infoboxs,
je vais m'y remettre...

Je n'aurais ensuite plus qu'a m'occuper de la fonction de Cluster et de la création d'une sidebar qui affiche les données des markers visibles dans le viewport, et je pense que ma carte sera deja bien fonctionnel

Invité · 25/05/2013, 14h41

Salut,

Un truc me trouble.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 return function() {
   var point = new google.maps.LatLng(
           parseFloat(markers[i].getAttribute("lat")),
           parseFloat(markers[i].getAttribute("lng")));
   newMarkers[i].infobox.open(map, this);
   map.panTo(markerData[i].point);
} // return

Plus simple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
return function() {
    newMarkers[i].infobox.open(map, this);
    map.panTo(newMarkers[i].getPosition());
} // return

D'autant que markerData[i], il n'existe pas. Enfin,pas dans le bout de code.

a+

Création infobox [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager