Как динамически изменять маркеры Google maps с помощью ajax или аналогичного приложения

---

Привет,
Я боролся два дня и не могу справиться.
У меня есть скрипт с картой google, на которой есть несколько маркеров. Теперь мне нужно менять маркеры каждый раз, когда меняется день, выбранный в календаре.

Я полагаю, что мне нужно изменить маркеры с помощью ajax и php. С php-частью проблем нет, но я не могу изменить маркеры. Есть идеи, что делать и как?

Я пропустил свой код карты ниже, цикл php с маркерами-это то, что нужно изменить динамически;

<div id="map" style="width: 100%; height:300px"></div>
<script>

var infowindow = null;
var markers = [];
function initMap(){
   var myLatlng = new google.maps.LatLng(36.5505197,-4.8349095);
   var myOptions = {
      zoom: 10,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   };

   var citiesObject = [
      {
         name: 'Benalmádena Costa',
         lat: 36.5985811,
         lon: -4.5184101,
         zoom: 14
      },
      {
         name: 'Torrequebrada',
         lat: 36.5843169,
         lon: -4.5353021,
         zoom: 14
      },
      {
         name: 'Almuñecar',
         lat: 36.7363573,
         lon: -3.6936177,
         zoom: 14
      },
      {
         name: 'Estepona',
         lat: 36.4078757,
         lon: -5.1877823,
         zoom: 11
      },
      {
         name: 'Atalaya-Benavista',
         lat: 36.4660413,
         lon: -5.0289864,
         zoom: 13
      },
      {
         name: 'Fuengirola',
         lat: 36.5457253,
         lon: -4.6281043,
         zoom: 13
      },
      {
         name: 'Carvajal',
         lat: 36.5712203,
         lon: -4.6022271,
         zoom: 13
      },
      {
         name: 'Málaga Capital',
         lat: 36.7139351,
         lon: -4.424794,
         zoom: 14
      },
      {
         name: 'Marbella Town',
         lat: 36.5112345,
         lon: -4.8869307,
         zoom: 14
      },
      {
         name: 'Marbella East',
         lat: 36.5053049,
         lon: -4.7980592,
         zoom: 13
      },
      {
         name: 'Marbella West',
         lat: 36.4963191,
         lon: -4.9380258,
         zoom: 13
      },
      {
         name: 'Marbella San Pedro',
         lat: 36.4772001,
         lon: -4.9984498,
         zoom: 13
      },

      {
         name: 'La Cala',
         lat: 36.5022141,
         lon: -4.6806549,
         zoom: 14
      },
      {
         name: 'Calahonda',
         lat: 36.4923402,
         lon: -4.7129583,
         zoom: 14
      },
      {
         name: 'Nerja',
         lat: 36.7593257,
         lon: -3.871842,
         zoom: 13
      },
      {
         name: 'Torre del Mar',
         lat: 36.7389255,
         lon: -4.095758,
         zoom: 13
      },
      {
         name: 'Torremolinos',
         lat: 36.6265478,
         lon: -4.4949926,
         zoom: 14
      },
      {
         name: 'La Carihuela',
         lat: 36.6138008,
         lon: -4.5055638,
         zoom: 14
      },
      {
         name: 'Torrox',
         lat: 36.7350957,
         lon: -3.9585594,
         zoom: 13
      },
   ];

   citiesObject.forEach((city) => {
      if (document.getElementById("city").value === city.name) {
         myLatlng = new google.maps.LatLng(city.lat,city.lon,);
         myOptions = {
            zoom: city.zoom,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };
      }
   });

   var map = new google.maps.Map(document.getElementById('map'), myOptions);

   infowindow = new google.maps.InfoWindow({
      content: "holding..."
   });

   <?php
   $paradax = '';
   $paradasarray = json_decode($paradasarray);
foreach ($paradasarray as $parada){
      $hora = $parada->horarecogida->{'0'};
      $paradax = $parada->nombreparada;
      $idparada = $parada->idparada->{'0'};
      ?>

      var marker = new google.maps.Marker({
         position: new google.maps.LatLng(<?php echo $parada->lat->{'0'} . ", " . $parada->lng->{'0'}  ?>),
         map: map,
         html: "<?php echo $paradax; ?><br><?php echo $lang_pickuptime." ".$hora; ?><br><br><?php echo $lang_eligaeste; ?> <input name='elegirparada' type='checkbox' id='elegirparada' value='1'><br><input type='hidden' id='paradax' value='<?php echo $paradax; ?>'><input type='hidden' value='<?php echo $idparada; ?>' id='idparada'><div id='errortext'></div>"
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', function () {
         infowindow.setContent(this.html);
         infowindow.open(map, this);
      });
      <?php
}
   ?>

   google.maps.event.addListener(infowindow, 'domready', function() {
      defineListener();
   });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AImikey&callback=initMap&language=en"
async defer></script>
<p style="display: none;" id="elegidotexto"><?php echo $lang_elegido; ?>
   <span id="elegidotexto2"> </span></p>
   <input type="hidden" id="pickupoint" name="pickupoint" value="">
   <input type="hidden" id="puntorecoger" name="puntorecoger" value="">
   <script>
   function defineListener() {
      var elegirParadaEl = document.getElementById("elegirparada");

      elegirParadaEl.addEventListener("change", function(){
         // Get the checkbox
         var checkBox = document.getElementById("elegirparada");
         // Get the output text
         var text = document.getElementById("elegidotexto");

         // If the checkbox is checked, display the output text
         if (checkBox.checked == true){
            text.style.display = "block";
         } else {
            text.style.display = "none";
         }
         document.getElementById("elegidotexto2").innerHTML = document.getElementById("paradax").value;
         document.getElementById("puntorecoger").value= document.getElementById("paradax").value;
         document.getElementById("pickupoint").value = document.getElementById("idparada").value;                                 // window.sessionStorage.setItem('pickupointguardar', document.getElementById("idparada").value);
      });
      var divErrortext = document.getElementById('errortext'),
      valid = true;
      var element2 = document.querySelector('#elegirparada');
      if (element2 !== null) {
         element2.addEventListener('click', () => {
              if (document.solicitud.plazasDisponibles.value == ''){
                console.log(element2)
                  divErrortext.innerHTML="<span style='color:red'><?php echo $lang_val_choosedate ?></span>";
                  return false;
              }
         })
      }
   }
   var element = document.querySelector('#city');
   element.addEventListener('change', () => {
      initMap()
   })

   </script>

Что я уже пробовал:

Я боролся с Ajax, начал только с маркеров, но получил только ошибки, затем попробовал всю карту, но ни того, ни другого. Только сделал простой ajax, например, написание innerhtml, но ничего подобного, как это. Не знаю, с чего начать.

---