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

[xfxstudios]

hasta donde veo, tendrias que llamar a la funcion function initMap(){ pasandole los marcadores con cada update que requieras para que esta refresque el mapa con la nueva info.

Te dejo este Fiddle para que te ilustres en lo que te intendo decir:

[JSFIDDLE="http://jsfiddle.net/xfxstudios/14g0mkxu/29/"][/JSFIDDLE]

http://jsfiddle.net/xfxstudios/14g0mkxu/29/

[helenp]

Muchas gracias,
Eso tiene muy buena pinta y parece sencillo.
El problema es que al seleccionar fecha en el calendario tengo que hacer una nueva llamada xml para obtener las paradas (los marcadores) y procesarlo con php y luego con ajax o similar colocar los nuevos marcadores en el mapa.
Allí es donde estoy perdida, el php bien, pero la parte del ajax y llamar a la función init map desde ajax....
Solo he hecho cosas como innerhtml etc.
Seguiré intentando usando eso como guía

[xfxstudios]

Solo retornas los marcadores en un objeto JSON y luego se los pasas a initMap, como ves en mi ejemplo donde ves que le coloco la x como null en la funcion para cargar data por defecto si la ubiera, te dejo un ejemplo, pero cargando los datos iniciales del mapa con ajax:

http://jsfiddle.net/xfxstudios/14g0mkxu/52/

[helenp]

Iniciado por xfxstudios

Solo retornas los marcadores en un objeto JSON y luego se los pasas a initMap, como ves en mi ejemplo donde ves que le coloco la x como null en la funcion para cargar data por defecto si la ubiera, te dejo un ejemplo, pero cargando los datos iniciales del mapa con ajax:

http://jsfiddle.net/xfxstudios/14g0mkxu/52/

gracias, pero me sale error 404, el fiddle no existe!

[xfxstudios]

Corregido el enlace
http://jsfiddle.net/xfxstudios/cf02mz6u/14/

[helenp]

Muchas gracias,
ya lo tengo funcionando, pero a mi manera, no logro
traducir ese jQuery a javascript puro.

Me ha gustado mucho tu solución.

[xfxstudios]

Sin mal no recuerdo, seria algo así en javascript puro:

Código Javascript:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open('GET', 'https://api.myjson.com/bins/ya8qy', true);
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
        if(xmlhttp.status == 200) {
            var obj = JSON.parse(xmlhttp.responseText);
            //en obj estan los datos
         }
    }
};
xmlhttp.send(null);