Google Maps API : Géolocalisation + insertion de marqueurs

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:

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 :ccool:

Finalement, j'ai trouvé la solution en modifiant une partie de mon code comme ceci :

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
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
 
  }); 
 
// La partie du code que j'ajoute
 
    function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);
 
    if (marker) {
      // Si le marqueur existe déjà, je le déplace simplement
      marker.setPosition(newPoint);
    }
    else {
      // Si le marqueur n'existe pas, je le créé
      marker = new google.maps.Marker({
        position: newPoint, 
        map: map
      });
    }
 
    // Je centre la carte sur ma nouvelle position
    map.setCenter(newPoint);
  }); 
 
  // J'appelle ma fonction autoUpdate() toutes les 5 secondes
  setTimeout(autoUpdate, 5000);
}
 
autoUpdate();
 
}

A bientôt.

Une petit question, saurais tu inserer un marqueur depuis une géolocalisation?
Un exemple je passe devant un magasin et je veut l'inserer sur google map, comment faire?
Merci d'avance