Clear markers and put the selected [javascript]

Asked

Viewed 27 times

0

Hello

I am creating a script to remove the markers and put only the specific markers, but it is only working once if I then try to select another filter the markers appear all back and do not erase and put the specific markers, someone can help me with the script?

When entering the page:

inserir a descrição da imagem aqui

With the Masc filter selected: (only Marker in port appears)

inserir a descrição da imagem aqui

With the Fem filter selected: (the port marquer should disappear)

inserir a descrição da imagem aqui

Fem Marketer as selected port Marketer should select, basically what you should do is delete the new old markers and mark the markers that select indicates... someone knows how to do this?

Code:

function LoadJsonData() {

  var jsondata;

  $.ajax({ 
      url: './json/dados.json', 
      dataType: 'json', 
      async: false,
      success: function(json){ 
          jsondata = json;
      } 
  });

  return jsondata;
}

var map;
var markers = [];

    
function initMap() {

    var jsondata = LoadJsonData();

    
    map = new google.maps.Map(document.getElementById('map'),
        {
            center: { lat: 38.736946, lng: -9.142685 },
            zoom: 7,
            });
            
            for (var i = 0; i < jsondata.length; i++) {
            var iconBase = './imagens/iconmapa2.png';
            var obj = jsondata[i];
    
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(obj.latitude, obj.longitude),
                map: map,
                title: obj.title,
                id: obj.id,
                visible: true,
                icon: iconBase
            });

            markers.push(marker);
        }    
}

 function setMapOnAll(map) {
    var iconBase = './imagens/iconmapa2.png';
    for (var i = 0; i < markers.length; i++) {
        if(markers[i].visible == true)
        {
            var marker = new google.maps.Marker({
                position: markers[i].position,
                map: map,
                title: markers[i].title,
                id: markers[i].id,
                visible: true,
                icon: iconBase
            });
        }
        else
        {
            markers[i].setMap(null);
        }
    }
  }

$(document).on("click", "#btnBuscar", function () {
    var filtroFaixaEtaria = $("#FaixaEtaria option:selected").text();
    var filtroSexo = $("#Sexo option:selected").text();
    var filtroRecursoArma = $("#RecursoArma option:selected").text();
    var filtroDistrito = $("#Distrito option:selected").text();

    var arrayResultados = jsondata.filter(function (item) {
        var criteria = true;

        if (filtroFaixaEtaria != null && filtroFaixaEtaria != "")
            criteria = criteria && item["Faixa Etaria"] == filtroFaixaEtaria;
        if (filtroSexo != null && filtroSexo != "")
            criteria = criteria && item["Sexo"] == filtroSexo;
        if (filtroRecursoArma != null && filtroRecursoArma != "")
            criteria = criteria && item["RecursoArma"] == filtroRecursoArma;
        if (filtroDistrito != null && filtroDistrito != "")
            criteria = criteria && item["Distrito"] == filtroDistrito;

        return criteria;

    });

    for (var i = 0; i < markers.length; i++) {
       
        markers[i].setMap(null);
    }    

    var iconBase = './imagens/iconmapa2.png';
 
    for (var i = 0; i < arrayResultados.length; i++) {
      var marker = new google.maps.Marker({
        position: markers[arrayResultados[i].id-1].position,
        map: map,
        title: markers[arrayResultados[i].id-1].title,
        id: markers[arrayResultados[i].id-1].id,
        visible: true,
        icon: iconBase
    }); 
    } 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="escolha">
          <form id="selectsfiltro">
            <h6>Faixa Etaria:</h6>
            <select id="FaixaEtaria" class="custom-select">
              <option></option>
              <option value="1">0-17</option>
              <option value="2">18-25</option>
              <option value="3">26-35</option>
              <option value="4">36 ou mais</option>
            </select>

            <br />
            <br />
            <h6>Sexo:</h6>
            <select id="Sexo" class="custom-select">
              <option></option>
              <option value="5">Masc</option>
              <option value="6">Fem</option>
            </select>

            <br />
            <br />
            <h6>Recurso a arma:</h6>
            <select id="RecursoArma" class="custom-select">
              <option></option>
              <option value="7">Sim</option>
              <option value="8">Não</option>
            </select>


            <br />
            <br />
            <h6>Localidade:</h6>
            <select id="Distrito" class="custom-select">
              <option></option>
              <option value="9">Viana do Castelo</option>
              <option value="10">Vila Real</option>
              <option value="11">Bragança</option>
              <option value="12">Braga</option>
              <option value="13">Porto</option>
              <option value="14">Aveiro</option>
              <option value="15">Viseu</option>
              <option value="16">Guarda</option>
              <option value="17">Coimbra</option>
              <option value="18">Castelo Branco</option>
              <option value="19">Leiria</option>
              <option value="20">Lisboa</option>
              <option value="21">Santarém</option>
              <option value="22">Portalegre</option>
              <option value="23">Évora</option>
              <option value="24">Setúbal</option>
              <option value="25">Beja</option>
              <option value="26">Faro</option>
              <option value="27">Açores</option>
              <option value="28">Madeira</option>
            </select>
          </form>

          <br>

          <div class="botesdefiltrar">
            <button id="btnBuscar" class="btn btn-outline-warning">Filtrar</button>
          </div>
        </div>
        
        <div id="map" class="googlemap"></div>

  • 1

    "Basically what I should do is delete the new old markers, "are they old or new? can’t be the same thing at the same time, clarify things.

  • @Mauroalmeida basically what I need now I think is to make a loop that causes when they click back on the filter button would erase the old markers and by new ones

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.