Google Map: Markermanager + Boutons Radio

Bonjour,

Je travail actuellement sur Google map dans le cadre de mon stage et je rencontre quelques problème dans le Javascript :?. J'utilise le Markermanager de google map afin d'afficher mes marqueurs selon le niveau de zoom. Mes marqueurs favoris seront au premier plan et inversement.
Je souhaite switché entre mes marqueurs grâce à des boutons radio. Chaque boutons radio appel un Xml différent.
Le problème c'est que quand j'appuie plusieurs fois sur un bouton radio les marqueurs se superpose et quand je change de bouton radio les anciens marqueurs restent :cry:
Voici mon code:

Javascript:

Code:

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
 
var map = null;
var mgr = null;
var gmarkersA = [];
var gmarkersB = [];
var gmarkersC = [];
var gmarkersD = [];
 
var icon = new GIcon(); 
 icon.shadow = 'http://labs.google.com/ridefinder/image/mm_20_shadow.png';
 icon.iconSize = new GSize(12, 20);
 icon.shadowSize = new GSize(22, 20);
 icon.iconAnchor = new GPoint(6, 20);
 icon.infoWindowAnchor = new GPoint(5, 1);
 
    function setupMap() {
      	if (GBrowserIsCompatible()) {
        	map = new GMap2(document.getElementById("map"));
        	map.setCenter(new GLatLng(0.0 , 0.0), 1);
			map.addControl(new GLargeMapControl());
			map.enableScrollWheelZoom(); 
			window.setTimeout(setupMyMarkers, 0);		
      	}
 
    }
 
	function createMarker(point, favoris, icon){
		var marker = new GMarker(point, {icon: icon});
			GEvent.addListener(marker, "click", function(){
				marker.openInfoWindowHtml("<b>" + favoris + "</b>");
			});
			return marker;
		}
 
	function setupMyMarkers(){
 
		var xmlName;
		if (document.myRadio.choix[0].checked == true) {
			xmlName = 'team.php';
 
		} else if (document.myRadio.choix[1].checked == true){
			xmlName = 'match.php';
 
		}
 
			GDownloadUrl("files/"+ xmlName, function(data){
				var xmlData = GXml.parse(data);
				var markers = xmlData.documentElement.getElementsByTagName("marker");
				for (var i = 0; i < markers.length; i++) {
					var lat = parseFloat(markers[i].getAttribute("lat"));
					var lng = parseFloat(markers[i].getAttribute("lng"));
					var point = new GLatLng(lat, lng);
					var favoris = markers[i].getAttribute("favoris");
 
					if (favoris < 500) {
						var marker = createMarker(point, favoris, new GIcon(icon, "http://labs.google.com/ridefinder/images/mm_20_yellow.png"));
						gmarkersA.push(marker);
					}
					else 
						if (favoris > 500 && favoris < 1000) {
							var marker = createMarker(point, favoris, new GIcon(icon, "http://labs.google.com/ridefinder/images/mm_20_blue.png"));
							gmarkersB.push(marker);
						}
						else 
							if (favoris > 1000 && favoris < 5000) {
								var marker = createMarker(point, favoris, new GIcon(icon, "http://labs.google.com/ridefinder/images/mm_20_orange.png"));
								gmarkersC.push(marker);
							}
							else 
								if (favoris > 5000) {
									var marker = createMarker(point, favoris, new GIcon(icon, "http://labs.google.com/ridefinder/images/mm_20_red.png"));
									gmarkersD.push(marker);
								}
				}
 
				mgr = new MarkerManager(map);
				mgr.addMarkers(gmarkersA, 2, 3);
				mgr.addMarkers(gmarkersB, 3, 4);
				mgr.addMarkers(gmarkersC, 4, 5);
				mgr.addMarkers(gmarkersD, 5, 6);
				mgr.refresh();
			});
		}

HTML:

Code:

1
2
3
4
5
6
7
8
9
10
 
  <body onload="setupMap()"; onunload="GUnload()">
  	<div id="radioSelect">
  		<form name="myRadio">
  		Test 1<input type="radio" name="choix" value="radio1" onClick="setupMyMarkers()">||
		Test 2<input type="radio" name="choix" value="radio2" onClick="setupMyMarkers()">||
		</form>
  	</div>
    <div id="map" style="width: 700px; height: 600px"></div>
  </body>

Cordialement.