Discussion :

[salamaabdelhakim]

Cette carte Google est d'obtenir de directions à un emplacement indiqué par les coordonnées du client comme destination.
ce principe est fonctione tres bien mais le probleme où je suis coincé

Même la direction à un marqueur indiqué est affichée, le problème est que tous les marqueurs toujours restes dans la carte, pour moi j'essaye d'affichaerjuste deux choses : la direction et le marqueur avec le client de code que je choisis , et tous les autres marqueurs se cacheront.

Voici des remarques a propos des fonction dans mon code,

1-Une fois que j'ai ajouté cette fonction pour pousser tous les marqueurs dans une variable

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
 
    for (var i = 0; i < data.length; i++) {
 
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
        title: data[i].CodeClient,
        map: map
        });
 
        gmarkers.push(marker);
    }
 
  });

2-Et j'ajoute cette fonction pour cacher d'autres marqueurs

Code :

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

1
2
3
4
5
6
 function toggleMarkers() {
  for (i = 0; i < gmarkers.length; i++) {
    if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
    else gmarkers[i].setMap(map);
  }
}

Ce problème j'ai fait face pendant des jours et ne peux pas sembler résoudre, même que j'ai essayé de regarder une grande variété de blocs de code ici et sur la documentation d'API de Google Maps, mais je ne comprend pas comment cacher d'autres marqueurs.

N'importe quelles suggestions, idées seront beaucoup apprécié!

voici une capture d'ecrant



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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!-- begin snippet: js hide: false console: true babel: false -->
 
<!-- language: lang-js -->
 
    var map;
    var directionsService;
    var directionsDisplay;
    var geocoder;
    var infowindow;
 
    function init() {
      directionsService = new google.maps.DirectionsService();
      directionsDisplay = new google.maps.DirectionsRenderer();
      geocoder = new google.maps.Geocoder();
      infowindow = new google.maps.InfoWindow();
      var mapOptions = {
        zoom: 6,
        center: center = new google.maps.LatLng(32, -6),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
 
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
 
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directions_panel'));
 
      // Detect user location
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
 
          var userLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 
          geocoder.geocode({
            'latLng': userLocation
          }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
              document.getElementById('start').value = results[0].formatted_address
            }
          });
 
        }, function() {
          alert('Geolocation is supported, but it failed');
        });
      }
 
      makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
 
        var data = JSON.parse(data.responseText);
        var selectBox = document.getElementById('destination');
 
        for (var i = 0; i < data.length; i++) {
          displayLocation(data[i]);
          // addOption(selectBox, data[i]['CodeClient'], data[i]['GeoAdresse']);
          addOption(selectBox, data[i]['CodeClient'], data[i].Latitude + "," + data[i].Longitude);
          console.log("addOption(" + data[i]['CodeClient'] + " addr=" + data[i]['GeoAdresse'] + " latLng=" + data[i].Latitude + "," + data[i].Longitude);
        }
      });
 
    makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce25789f00c1b84ccb5b231ec455b7/raw/393220f08a02b962e3e764d2b497b318353828db/gistfile1.txt', function(data) {
 
        for (var i = 0; i < data.length; i++) {
 
    	  var marker = new google.maps.Marker({
    		position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
    		title: data[i].CodeClient,
    		map: map
    		});
 
    		gmarkers.push(marker);
        }
 
      }); 
 
    }
 
    function toggleMarkers() {
      for (i = 0; i < gmarkers.length; i++) {
        if (gmarkers[i].getMap() != null) gmarkers[i].setMap(null);
        else gmarkers[i].setMap(map);
      }
    }	
 
 
    function addOption(selectBox, text, value) {
      var option = document.createElement("OPTION");
      option.text = text;
      option.value = value;
      selectBox.options.add(option);
    }
 
 
 
 
    function calculateRoute() {
 
      var start = document.getElementById('start').value;
      var destination = document.getElementById('destination').value;
      console.log("selected option value=" + destination);
      var destPt = destination.split(",");
      var destination = new google.maps.LatLng(destPt[0], destPt[1]);
      if (start == '') {
        start = center;
      }
 
      var request = {
        origin: start,
        destination: destination,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      };
      console.log("origin:" + start);
      console.log("dest:" + destination.toUrlValue(6));
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
      toggleMarkers(); /*I think that when I add this line it will execute the function who hide markers after displaying the destination, but it doesn't work*/
    }
 
 
 
 
    function makeRequest(url, callback) {
      var request;
      if (window.XMLHttpRequest) {
        request = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
      } else {
        request = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5
      }
      request.onreadystatechange = function() {
        if (request.readyState == 4 && request.status == 200) {
          callback(request);
        }
      }
      request.open("GET", url, true);
      request.send();
    }
 
 
    function displayLocation(rythmstu_innotec) {
 
      var content = '<div class="infoWindow"><strong> Code Client : ' + rythmstu_innotec.CodeClient + '</strong>' +
        '<br />Latitude : ' + rythmstu_innotec.Latitude +
        '<br />Longitude : ' + rythmstu_innotec.Longitude +
        '<br />Route : ' + rythmstu_innotec.Route +
        '<br />Secteur : ' + rythmstu_innotec.Secteur +
        '<br />Agence : ' + rythmstu_innotec.Agence +
        '<br />prenom de Client : ' + rythmstu_innotec.PrenomClient +
        '<br />Num Adresse : ' + rythmstu_innotec.NumAdresse +
        '<br />GeoAdresse : ' + rythmstu_innotec.GeoAdresse +
        '<br />Téléphone : ' + rythmstu_innotec.Tel +
        '<br />Whatsapp : ' + rythmstu_innotec.Whatsapp +
        '<br />Nbr Frigos : ' + rythmstu_innotec.NbrFrigo +
        '<br />Ouverture Matin : ' + rythmstu_innotec.OpenAm +
        '<br />Fermeture Matin : ' + rythmstu_innotec.CloseAm +
        '<br />Ouverture après-midi : ' + rythmstu_innotec.OpenPm +
        '<br />Fermeture Après-midi : ' + rythmstu_innotec.ClosePm + '</div>';
 
      if (parseInt(rythmstu_innotec.Latitude) == 0) {
        geocoder.geocode({
          'GeoAdresse': rythmstu_innotec.GeoAdresse
        }, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var marker = new google.maps.Marker({
              map: map,
              position: results[0].geometry.rythmstu_innotec,
              title: rythmstu_innotec.name
            });
 
            google.maps.event.addListener(marker, 'click', function() {
              infowindow.setContent(content);
              infowindow.open(map, marker);
            });
          }
        });
      } else {
        var position = new google.maps.LatLng(parseFloat(rythmstu_innotec.Latitude), parseFloat(rythmstu_innotec.Longitude));
        var marker = new google.maps.Marker({
          map: map,
          position: position,
          title: rythmstu_innotec.name
        });
 
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent(content);
          infowindow.open(map, marker);
        });
      }
    }

Code CSS :

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
<!-- language: lang-css -->
 
    body {
      font: normal 14px Verdana;
    }
 
    h1 {
      font-size: 24px;
    }
 
    h2 {
      font-size: 18px;
    }
 
    #sidebar {
      float: right;
      width: 30%;
    }
 
    #main {
      padding-right: 15px;
    }
 
    .infoWindow {
      width: 220px;
    }

Code html :

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
<!-- language: lang-html -->
 
    <title>MAP itinéraire </title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
 
    <body onload="init();">
 
 
 
      <form id="services">
        Location: <input type="text" id="start" value="Midar" /> Destination:
        <select id="destination" onchange="calculateRoute();"></select>
        <input type="button" value="afficher la direction" onclick="calculateRoute();" />
      </form>
 
      <section id="sidebar">
        <div id="directions_panel"></div>
      </section>
 
      <section id="main">
        <div id="map_canvas" style="width: 70%; height: 750px;"></div>
      </section>
 
    </body>
 
 
<!-- end snippet -->

[NoSmoking]

Bonjour,
je ne vois pas pourquoi tu fais deux fois la même requête

Code :

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

1
2
3
makeRequest('https://gist.githubusercontent.com/abdelhakimsalama/3cce....db/gistfile1.txt', function(data) {
  // ...
}

mets toutes tes initialisations dans une seule et même requête.