Bonjour à tous,

Comme je serai amener à avoir plusieurs milliers de markers sur ma carte, j'aimerai n'afficher que ceux dans le viewport en cours pour ne pas surcharger la carte.

J'ai donc fait en sorte que mon fichier XML ne charge de la BDD que ceux-ci, et ca fonctionne bien.
Seulement sur la carte, je n'ai maintenant plus qu'un seul marker qui charge. Si je bouge la carte, les autres chargent et comme les premiers chargés ne s'effacent pas, je récupère tous mes points au final....

Mais au chargement, je n'ai donc qu'un marker qui apparait.
Avez vous une idée du soucis ?

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
88
89
90
91
92
///////////////////////// Affichage de la carte /////////////////////////////////////////////////////////////////////////////////////
 
function showMap() {
    document.getElementById("map").style.display = "block";
    var mapOptions = {
        zoom: 6,
		minZoom: 3,
        center : new google.maps.LatLng(48, 5),
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
		zoomControlOptions: {
        	style: google.maps.ZoomControlStyle.LARGE,
        	position: google.maps.ControlPosition.RIGHT_BOTTOM
    	}, <!-- zoomControlOptions -->
		panControl: false,
		mapTypeControl: false,
		streetViewControl: false,
    }; <!-- var mapOptions -->
 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
	google.maps.event.addListener(map, 'tilesloaded', function () { loadMapFromCurrentBounds(map);} ); 
 
    var infoWindow = new google.maps.InfoWindow;
}  <!-- function showMap -->
 
///////////////////////// Recherche des données dans le fichier XML et placement des markers////////////////////////////////////////////////////////////////////
 
function loadMapFromCurrentBounds() {
 
    var bounds = map.getBounds();
 
    var swPoint = bounds.getSouthWest();
    var nePoint = bounds.getNorthEast();
 
    var swLat = swPoint.lat();
    var swLng = swPoint.lng();
    var neLat = nePoint.lat();
    var neLng = nePoint.lng();
 
	downloadUrl("donnees_xml.php?swLat="+swLat+"&swLng="+swLng+"&neLat="+neLat+"&neLng="+neLng+"", 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 avatar = markers[i].getAttribute("avatar");
        var ville = markers[i].getAttribute("ville");
	var zipcode = markers[i].getAttribute("zipcode");
	var pays = markers[i].getAttribute("pays");
        var type = markers[i].getAttribute("type");
        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; margin: 0;">'+
		  				'<img src="http://localhost:8888/mobile/photos/avatars/' + avatar + '" class="avatar" alt="avatar" style="margin: 0 10px 0 0;">' +
		  				"<b>" + pseudo + "</b> <br/>" + ville +", "+ zipcode +" (" + pays +")" +
						'</div></a>';
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          }); <!-- var marker -->
       bindInfoWindow(marker, map, infoWindow, html);
        } <!-- for ... -->
    }); <!-- downloadUrl -->
	}
 
//////////////////////////////////////////////////////////////////
 
    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 bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
      });
    }
Merci !
Florian