Actualizar marcadores en google map

[helenp]

Hola,
Tengo un mapa que obtiene los marcadores de un xml que interpreto con php.

Ahora necesito cambiar que los marcadores cambia cada vez que cambio de fecha en un calendario.

He estado intentando con ajax, pero no llevo el tema muy bien.
He hecho cosas sencillas con ajax, con innerhtml etc., pero meter los marcadores, pues no consigo.


Este es el mapa:

Código 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>
 

Alguna idea como puedo dinamicamente quitar los marcadores y poner otros usando el mismo código y mapa. Seria solo la parte de marcadores y info windows.

Gracias