Icone personnalisé

**hubair** · 02/07/2013, 22h04

Bonjour à tous,
Je lis souvent le forum mais poste rarement...
Ce soir je franchi le cap pour essayer d'obtenir des avis éclairés

Sur une carte gmaps alimentée par xml, je remonte des points. J'arrive bien à extraire pour chaque item les infos de ma base de données (adresses, nom etc...) mais impossible de personnaliser l'icone en fonction de la catégorie choisie ?
J'ai l'impression que mon icone affiché sur tous mes markers est le dernier remonté par ma boucle ?

Je mets l'ensemble de ma page au cas où...

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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>Ma carte</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=FR&language=fr"></script>
 <script type="text/javascript">
    //<![CDATA[
 
var geocoder;
 
 
 
function load() {
  geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(46.841407,2.476044),
    zoom: 6,
    mapTypeId: 'roadmap'
  });
 
   var infoWindow = new google.maps.InfoWindow;
 
  downloadUrl("phpsqlajax_genxml3.php", function (data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
 
 
    for (var i = 0; i < markers.length; i++) {
 
      var address = markers[i].getAttribute("address");
      var urlp2r = markers[i].getAttribute("urlp2r");
      var tarif = markers[i].getAttribute("tarif");
      var adressep2r = markers[i].getAttribute("adressep2r");
      var parking = markers[i].getAttribute("parking");
	  var html = "<div style=\"font-family:arial;\"><b>" + adressep2r + "</b> <br/>Parking " + parking +" " + tarif + " <br /><a href=" + urlp2r +" target=\"_top\" >Détails</a>";
	  var myIcon = {url: parking};
 
 
  		  (function(capturedHtml){
			  geocoder.geocode({
				'address': address
			  }, function (results, status) {
				/* Si l'adresse a pu etre geolocalisee */
				if (status == google.maps.GeocoderStatus.OK) {
 
				  /* Affichage du marker */
				  var marker = new google.maps.Marker({
						map: map,
						icon: myIcon,
						position: results[0].geometry.location,
						title: "mon titre"
					  });
 
				  bindInfoWindow(marker, map, infoWindow, capturedHtml);
				}
			  });
			})(html);
 
        }
      });
 
    }
 
   function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
 
    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;
 
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };
 
      request.open('GET', url, true);
      request.send(null);
    }
 
    function doNothing() {}
 
 
 
    //]]>
 
  </script>
 
  </head>
 
  <body onLoad="load()" style="margin:0">
    <div id="map" style="width: 976px; height: 500px"></div>
  </body>
</html>

ma variable parking remonte l'url en dur d'icone basique google (rouge ou bleu)

Violà, si quelqu'un pouvait me guider. Le probléme est assez facile à localiser dans ma boucle... Mais après de longs jours de recherche... Je patauge.
Merci !

**NoSmoking** · 02/07/2013, 23h13

Bonsoir,
pourquoi ne pas passer un paramètre de plus à la closure

Code :

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

1
2
3
4
5
(function( capturedHtml, icone){
    geocoder.geocode({
        // le corps de la fonction
    });
})(html, myIcon);

**hubair** · 03/07/2013, 09h39

Bonjour et merci Nosmoking pour ta réponse rapide et avisée...

J'avais bien essayé cette piste mais sans succès et ça ne fonctionne toujours pas.
Si j'ajoute l'icone dans mon info bulle j'ai bien le bon mais en revanche, sur ma carte ça reste celui de même couleur ??

C'est bien comme ça qu'il faut faire :

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
    for (var i = 0; i < markers.length; i++) {
 
      var address = markers[i].getAttribute("address");
      var urlp2r = markers[i].getAttribute("urlp2r");
      var tarif = markers[i].getAttribute("tarif");
      var adressep2r = markers[i].getAttribute("adressep2r");
      var myIcon = markers[i].getAttribute("parking");
	  //var myIcon = {url: parking};
	  var html = "<div style=\"font-family:arial;\"><img src=\""+ myIcon +"\" /><b>" + adressep2r + "</b> <br/>" + tarif + " <br /><a href=" + urlp2r +" target=\"_top\" >Détails de cet emplacement sur parking2roues.com</a>";
 
	 //alert(myIcon);
 
  		  (function(capturedHtml, icon){
			  geocoder.geocode({
				'address': address
			  }, function (results, status) {
				/* Si l'adresse a pu etre geolocalisee */
				if (status == google.maps.GeocoderStatus.OK) {
 
				  /* Affichage du marker */
				  var marker = new google.maps.Marker({
						map: map,
						icon: myIcon,
						position: results[0].geometry.location,
						title: "mon titre"
					  });
 
				  bindInfoWindow(marker, map, infoWindow, capturedHtml, icon);
				}
			  });
			})(html, myIcon);
 
        }
      });
 
    }

Sinon, l'url : http://www.parking2roues.com/gmaps/p...ax_map_v3.html

Encore merci pour ton aide et toutes les réponses que tu donnes sur ce forum

**NoSmoking** · 03/07/2013, 18h08

il te faut utiliser la variable que tu passes en paramètre

Code :

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

1
2
3
4
5
6
var marker = new google.maps.Marker({
  map: map,
  icon: icon, // et NON myIcon,
  position: results[0].geometry.location,
  title: "mon titre"
});

**hubair** · 03/07/2013, 21h49

BAh me voilà bien bête...

Ca fonctionne parfaitement comme ça.
Merci encore pour ton aide précieuse

Icone personnalisé [Google Maps]

APIs Google

Discussions similaires

Partager

Partager