How to change Google maps markers dynamically using ajax or similar

See more:

PHP

Ajax

Hi,
I been struggling for two days and can't manage.
I have a script with a google map that have several markers. Now I need to change the markers every time when the day selected in a calendar is changed.

I suppose I need to change the markers with ajax and php. The php part no problem, but I can´t manage to change the markers. Any idea of what to do and how?

I past my map code below, the php loop with the markers is what is needed to be changed dynamically;

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

What I have tried:

Been struggling with Ajax, started with only markers part, but only got errors, then tried the whole map, but neither. Only done simple ajax, such as writing innerhtml but nothing similar as this. Don't know where to start.