Bonjour à tous,

Je me permets de vous demander votre aide au sujet de l'utilisation des API Google Maps.

J'ai pour objectif d'afficher une carte sur mon site et de mettre en place la géolocalisation ainsi que l'insertion de marqueurs venants d'une bdd.

Pour la géolocalisation, j'ai réussi, pour les marqueurs aussi, mais quand je combine les deux, l'icone qui représente ma position se multiplie à chaque changement de position.

Voici le script qui me géolocalise et insère mes marqueurs sur ma carte :

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
 
 
var customIcons = {
      objet: {
        icon: 'images/mesiconesmarqueurs.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
 
    };
 
 
 
    function initialize() {
      var map = new google.maps.Map(document.getElementById("macarte"), {
        center: new google.maps.LatLng(44.8333, 0.5667),
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
 
 
 
  if (navigator.geolocation)
  var watchId = navigator.geolocation.watchPosition(successCallback,
                            null,
                            {enableHighAccuracy:true});
else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");    
 
 
 
function successCallback(position){
  map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude), 
    icon : 'images/moniconeposition.png',
	map: map
 
  }); 
}
      var infoWindow = new google.maps.InfoWindow;
 
 
 
      downloadUrl("monsriptphp.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var emplacement = markers[i].getAttribute("emplacement");
          var adresse = markers[i].getAttribute("adresse");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + emplacement +"</b> <br/>" + adresse;
          var icon = customIcons[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon.icon,
            shadow: icon.shadow
          });
          bindInfoWindow(marker, map, infoWindow, 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() {}
Je vous remercie pour votre aide