Фильтруйте маркеры карт Google с помощью ползунка ввода, в зависимости от одного

Question

У меня есть огромный список магазинов с адресами (долгота и широта и кодовый клиент....). Для каждого магазина на странице Google Map появляется маркер. Моя проблема в том, что пользователи должны иметь возможность фильтровать эти маркеры в зависимости от одной вещи: CodeClient. Так что быть более конкретным. Если пользователь устанавливает CodeClient в ползунке ввода, он должен показывать только клиента (владельца CodeClient, которого мы поместили в ползунок). CodeClient = 12345, поэтому, когда мы помещаем число 12345 в ползунок ввода и нажимаем на кнопку, на нем должен отображаться только маркер этого клиента, я имею в виду маркеры, которые относятся к месту этого клиента.

Примечание 1: мой друг уже спрашивает вас, но у него нет ответа, поэтому я снова спрашиваю вас, есть ли решение

Примечание 2: CodeClient - это переменная, это уникальный номер для каждого клиента

// 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);
  });
}

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;
}

<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" />

Answer 1

Проблема решена с помощью xomena, это путь к решению

Фильтрация маркеров карт Google с помощью ползунков ввода на основе одной переменной

Answer 2

Вы устанавливаете заголовок для своих маркеров с этим CodeClient и вы толкаете свои маркеры в массиве. Так в чем здесь большая проблема? Просто переберите свой массив и установите видимость маркера на основе заголовка (CodeClient).

for (var i=0; i<markerArray.length; i++) {

  if (markerArray[i].title == '12345') {

    markerArray[i].setMap(map);
  } else {

    markerArray[i].setMap(null);
  }
}

Answer 3

Похоже, вы частично спрашиваете о настройке видимости маркера? Как затронуто в этом сообщении стека (среди других)

Видимость маркера API Карт Google

Более вероятный, marker.setVisible(true/false) это путь

И тогда в основном вы будете делать это в обработчике события изменения для ввода ползунка.

Одна идея заключается в том, чтобы перебрать массив маркеров и сделать его невидимым при установке видимого маркера, соответствующего выбранному клиенту coce.

Другая идея состоит в том, чтобы сделать его "словарным маркером", где ключи являются значением кода клиента, то есть:

markers = {
  12345: SomeMarkerInstance,
  67890: SomeOtherMarkerInstance,
  // ... etc
}

selectedMarker = '12345'

и таким образом вы можете быстро отключить видимость на текущем выбранном маркере, одновременно переключая на новый выбранный маркер. Остальные маркеры будут по умолчанию не видны.

Т.е. (псевдокодия)

function someEventHandler (event) {
  markers[selectedMarker].setVisible(false)
  markers[selectedCodeClientValue].setVisible(true)
  // and perhaps other stuff, e.g. recenter the map, etc
}