Filtrer les marqueurs suivant une variable codeclient

**salamaabdelhakim** · 21/03/2018, 21h21

Laissez-moi vous expliquer un peu le projet. J'ai une énorme liste de magasins avec des adresses (longitude et latitude et code client ....).

Maintenant, mon problème est, je dois être capable de filtrer ces marqueurs en fonction de CodeClient, je veux dire trouver le client dans Google Maps basé sur CodeClient.

J'ai regardé google maps api mais je n'ai pas trouvé quelque chose à faire.

Je serais vraiment reconnaissant si quelqu'un pourrait me montrer comment le faire ou me donner une bonne avance sur la façon de le faire.

voila 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
    // necessary variables
    var map;
    var infoWindow;
    var markersData = [];
    var markerCluster;
    var markerArray = []; //create a global array to store markers
 
    function initialize() {
      var mapOptions = {
        center: new google.maps.LatLng(32, -6),
        zoom: 7,
        mapTypeId: 'roadmap',
      };
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
 
      // create MarkerClusterer, markersArray is not populated yet
      markerCluster = new MarkerClusterer(map, [], {
        imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
      });
 
      // a new Info Window is created
      infoWindow = new google.maps.InfoWindow();
 
      // Event that closes the Info Window with a click on the map
      google.maps.event.addListener(map, 'click', function() {
        infoWindow.close();
      });
      // Finally displayMarkers() function is called to begin the markers creation
      displayMarkers();
    }
    google.maps.event.addDomListener(window, 'load', initialize);
 
 
    // This function will iterate over markersData array
    // creating markers with createMarker function
    function displayMarkers() {
 
      // this variable sets the map bounds according to markers position
      var bounds = new google.maps.LatLngBounds();
 
      // for loop traverses markersData array calling createMarker function for each marker 
      $.get("https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/bae93c852669a35f0e7053e9f8d068841ddf146a/get_data_google_api", function(response) {
        markersData = JSON.parse(response);
        for (var i = 0; i < markersData.length; i++) {
 
          var latlng = new google.maps.LatLng(markersData[i].Latitude, markersData[i].Longitude);
          var Route = markersData[i].Route;
          var Secteur = markersData[i].Secteur;
          var Agence = markersData[i].Agence;
          var CodeClient = markersData[i].CodeClient;
          var PrecisionGPS = markersData[i].PrecisionGPS;
          var Latitude = markersData[i].Latitude;
          var Longitude = markersData[i].Longitude;
          var BarCode = markersData[i].BarCode;
          var PrenomClient = markersData[i].PrenomClient;
          var NumAdresse = markersData[i].NumAdresse;
          var Tel = markersData[i].Tel;
          var Whatsapp = markersData[i].Whatsapp;
          var NbrFrigo = markersData[i].NbrFrigo;
          var OpenAm = markersData[i].OpenAm;
          var CloseAm = markersData[i].CloseAm;
          var OpenPm = markersData[i].OpenPm;
          var ClosePm = markersData[i].ClosePm;
          var OpenAmVen = markersData[i].OpenAmVen;
          var CloseAmVen = markersData[i].CloseAmVen;
          var OpenPmVen = markersData[i].OpenPmVen;
          var ClosePmVen = markersData[i].ClosePmVen;
          var OpenAmDim = markersData[i].OpenAmDim;
          var CloseAmDim = markersData[i].CloseAmDim;
          var OpenPmDim = markersData[i].OpenPmDim;
          var ClosePmDim = markersData[i].ClosePmDim;
          var IMEI = markersData[i].IMEI;
          var Date_Added = markersData[i].Date_Added;
 
          createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added);
 
          // marker position is added to bounds variable
          bounds.extend(latlng);
        }
        // Finally the bounds variable is used to set the map bounds
        // with fitBounds() function
        map.fitBounds(bounds);
      });
    }
 
 
    // This function creates each marker and it sets their Info Window content
    function createMarker(latlng, Route, Agence, Secteur, CodeClient, PrecisionGPS, Latitude, Longitude, BarCode, PrenomClient, NumAdresse, Tel, Whatsapp, NbrFrigo, OpenAm, CloseAm, OpenPm, ClosePm, OpenAmVen, CloseAmVen, OpenPmVen, ClosePmVen, OpenAmDim, CloseAmDim, OpenPmDim, ClosePmDim, IMEI, Date_Added) {
 
      var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        title: CodeClient
      });
 
      markerArray.push(marker); //push local var marker into global array
      // add marker to the MarkerClusterer
      markerCluster.addMarker(marker);
 
      // This event expects a click on a marker
      // When this event is fired the Info Window content is created
      // and the Info Window is opened.
      google.maps.event.addListener(marker, 'click', function() {
 
 
        var dicoFrigosDetails = {};
 
 
        var HTMLtext = "";
        for (var i = 1; i <= Object.keys(dicoFrigosDetails).length / 4; i++) {
          HTMLtext += '';
        }
        // Creating the content to be inserted in the infowindow
        var iwContent = '<div id="iw_container">' +
          '<div class="iw_title">Code Client : ' + CodeClient +
          '</div>' + '<div class="iw_content">Précision : ' + PrecisionGPS +
          '<br />Latitude : ' + Latitude +
          '<br />Longitude : ' + Longitude +
          '<br />Route : ' + Route +
          '<br />Secteur : ' + Secteur +
          '<br />Agence : ' + Agence +
          '<br />Code-barres : ' + BarCode +
          '<br />prenom de Client : ' + PrenomClient +
          //'<br />nom Complet de Client : ' + PrenomClient + ' ' + NomClient +
          '<br />Num Adresse : ' + NumAdresse +
          '<br />Téléphone : ' + Tel +
          '<br />Whatsapp : ' + Whatsapp +
          '<br />Nbr Frigos : ' + NbrFrigo + HTMLtext +
          '<br />Ouverture Matin : ' + OpenAm +
          '<br />Fermeture Matin : ' + CloseAm +
          '<br />Ouverture après-midi : ' + OpenPm +
          '<br />Fermeture Après-midi : ' + ClosePm +
          '<br />Ouverture Matin Ven : ' + OpenAmVen +
          '<br />Fermeture Matin Ven : ' + CloseAmVen +
          '<br />Ouverture après-midi Ven: ' + OpenPmVen +
          '<br />Fermeture après-midi Ven: ' + ClosePmVen +
          '<br />Ouverture Matin Dim : ' + OpenAmDim +
          '<br />Fermeture Matin Dim : ' + CloseAmDim +
          '<br />Ouverture après-midi Dim : ' + OpenPmDim +
          '<br />Fermeture après-midi Dim : ' + ClosePmDim +
          '<br />IMEI : ' + IMEI +
          '<br />Date Passage : ' + Date_Added +
          '</div>';
 
        // including content to the Info Window.
        infoWindow.setContent(iwContent);
        // opening the Info Window in the current map and at the current marker location.
        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
    html {
      height: 100%;
      background: gray;
    }
 
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
 
    #map-canvas {
      height: 100%;
    }
 
    #iw_container .iw_title {
      font-size: 16px;
      font-weight: bold;
    }
 
    .iw_content {
      padding: 15px 15px 15px 0;
    }

Code html :

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

1
2
3
4
5
6
7
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <title>InnoTech - Map - Server</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
 
    <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
    <div id="map-canvas" />

**NoSmoking** · 22/03/2018, 17h41

Bonjour,
tu ne peux pas faire une requête sélective en notifiant le CodeClient ?

Si non tu charges tes données, tu crées ta propre liste, <select> par exemple, puis suivant la sélection tu affiches le marker concerné.

**salamaabdelhakim** · 22/03/2018, 20h05

merci beaucoup monsieur pour votre idée, mais le problème c'est que j'ai essayé de le faire mais aucun résultat

**psychadelic** · 22/03/2018, 22h20

Je ne suis pas certain de bien comprendre le cadre de ton probleme.
cette opération de filtrage doit s'effectuer sur chaque navigateur client ?

ben il y a la méthode filter() en jQuery... => http://api.jquery.com/filter/

j'ai d'ailleurs testé:

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
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
<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>jQuery Filter()</title>
  <style>
    .orange { background-color: orange;}
    .green { background-color: lightgreen;}
  </style>
</head>
<body>
  <div>
    <label for "r_CodClient"> code Client : </label>
    <input  id="r_CodClient" type="number" val="0"> 
    <button id="Bt_Recherche_CC" disabled="disabled" >Recherche</button>
  </div>
  <h4>Résultats :</h4>
  <div id="id_Results">
    <p class="orange">Données JSON en cours de chargement....</p>
  </div>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
 
      var Gabdelhakimsalama_URL = "https://gist.githubusercontent.com/abdelhakimsalama/358669eda44d8d221bf58c629402c40b/raw/bae93c852669a35f0e7053e9f8d068841ddf146a/get_data_google_api";
 
      var markersData = null;
 
      fetch(Gabdelhakimsalama_URL)
      .then(function(response) { return response.json(); })
      .then(function(r_json) {
        markersData = r_json;
        $('#Bt_Recherche_CC').prop("disabled",false);
        $('#id_Results').empty().append('<p class="green">Données chargées !</p>');
      });
 
      $('#Bt_Recherche_CC').on('click', function() {
        $('#id_Results').empty();
        var
          rep = '',
          RechCod = $('#r_CodClient').val()
        ;
 
        var f_cc = $(markersData).filter(function (i,n){return n.CodeClient===RechCod});
 
        if (f_cc.length == 0) {
          $('#id_Results').append('<p class="orange">code client inconnu ('+RechCod+')</p>' );
        }
 
        for (var i=0;i<f_cc.length;i++) {
          rep = '<p>';
          rep += ' CodeClient: ' + f_cc[i].CodeClient;
          rep += ', Agence : ' + f_cc[i].Agence;
          rep += ', PrenomClient : ' + f_cc[i].PrenomClient;
          rep += ', Whatsapp : ' + f_cc[i].Whatsapp;
          rep += '</p>';
           
          $('#id_Results').append(rep);
        }
      }); /// $('#Bt_Recherche_CC').on('click'
 
    }); /// $(document).ready
  </script>
</body>
</html>

Mais si tu a un gros volume de données en Json, et pour peu que les navigateurs utilisés soit compatible, je pense qu'une solution IndexDB devrait répondre à ton besoin. => https://caniuse.com/#search=indexedDB

IndexDB est ou était le premier pas pour l'intégration de base Sqlite au sein des navigateur (mais il semble que le W3C va abandonner cette spécification).
enfin en attendant IndexDB existe, et c'est tout simplement un système interne d'indexation de données.

tu peux le nourrir au départ avec des données JSON, puis par la suite en faire des sauvegardes en format binaire.
s
donc la doc : https://developer.mozilla.org/fr/doc.../API_IndexedDB
https://developer.mozilla.org/fr/doc...sing_IndexedDB

j'ai aussi trouvé un "exemple" avec création , mise en place d'index, remplissage de données, et recherche :
https://gist.github.com/BigstickCarp...9a5d0e3a24814b

bon courage.

**psychadelic** · 23/03/2018, 13h56

... j'ai corrigé mon message précédent ...
un retour ?

**salamaabdelhakim** · 23/03/2018, 14h49

Envoyé par psychadelic

... j'ai corrigé mon message précédent ...
un retour ?

merci beaucoup c'est ca le principe ,
mais moi je suis besoint quand l'utilisateur faire la recherche code client ,
il va me redirectionne vers google map en prend en considération (longitude et latitude de ce client qui existe déjà dans notre base de donné ) et pointé exactement sur le client qui contient ce code .

ou comment avoir une google map sur la meme page qui va me afficher ce client
Nom : 1.PNG
Affichages : 774
Taille : 40,7 Ko

Nom : 1.PNG
Affichages : 774
Taille : 40,7 Ko

Filtrer les marqueurs suivant une variable codeclient [Google Maps]

APIs Google

Vue hybride

Discussions similaires

Partager

Partager