Foros del Web » Programando para Internet » Javascript »

Actualizar marcadores en google map

Estas en el tema de Actualizar marcadores en google map en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/11/2018, 11:33
 
Fecha de Ingreso: mayo-2009
Mensajes: 371
Antigüedad: 9 años, 6 meses
Puntos: 5
Actualizar marcadores en google map

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:
Ver original
  1. <div id="map" style="width: 100%; height:300px"></div>
  2. <script>
  3.  
  4. var infowindow = null;
  5. var markers = [];
  6. function initMap(){
  7.    var myLatlng = new google.maps.LatLng(36.5505197,-4.8349095);
  8.    var myOptions = {
  9.       zoom: 10,
  10.       center: myLatlng,
  11.       mapTypeId: google.maps.MapTypeId.ROADMAP
  12.    };
  13.  
  14.    var citiesObject = [
  15.       {
  16.          name: 'Benalmádena Costa',
  17.          lat: 36.5985811,
  18.          lon: -4.5184101,
  19.          zoom: 14
  20.       },
  21.       {
  22.          name: 'Torrequebrada',
  23.          lat: 36.5843169,
  24.          lon: -4.5353021,
  25.          zoom: 14
  26.       },
  27.       {
  28.          name: 'Almuñecar',
  29.          lat: 36.7363573,
  30.          lon: -3.6936177,
  31.          zoom: 14
  32.       },
  33.       {
  34.          name: 'Estepona',
  35.          lat: 36.4078757,
  36.          lon: -5.1877823,
  37.          zoom: 11
  38.       },
  39.       {
  40.          name: 'Atalaya-Benavista',
  41.          lat: 36.4660413,
  42.          lon: -5.0289864,
  43.          zoom: 13
  44.       },
  45.       {
  46.          name: 'Fuengirola',
  47.          lat: 36.5457253,
  48.          lon: -4.6281043,
  49.          zoom: 13
  50.       },
  51.       {
  52.          name: 'Carvajal',
  53.          lat: 36.5712203,
  54.          lon: -4.6022271,
  55.          zoom: 13
  56.       },
  57.       {
  58.          name: 'Málaga Capital',
  59.          lat: 36.7139351,
  60.          lon: -4.424794,
  61.          zoom: 14
  62.       },
  63.       {
  64.          name: 'Marbella Town',
  65.          lat: 36.5112345,
  66.          lon: -4.8869307,
  67.          zoom: 14
  68.       },
  69.       {
  70.          name: 'Marbella East',
  71.          lat: 36.5053049,
  72.          lon: -4.7980592,
  73.          zoom: 13
  74.       },
  75.       {
  76.          name: 'Marbella West',
  77.          lat: 36.4963191,
  78.          lon: -4.9380258,
  79.          zoom: 13
  80.       },
  81.       {
  82.          name: 'Marbella San Pedro',
  83.          lat: 36.4772001,
  84.          lon: -4.9984498,
  85.          zoom: 13
  86.       },
  87.  
  88.       {
  89.          name: 'La Cala',
  90.          lat: 36.5022141,
  91.          lon: -4.6806549,
  92.          zoom: 14
  93.       },
  94.       {
  95.          name: 'Calahonda',
  96.          lat: 36.4923402,
  97.          lon: -4.7129583,
  98.          zoom: 14
  99.       },
  100.       {
  101.          name: 'Nerja',
  102.          lat: 36.7593257,
  103.          lon: -3.871842,
  104.          zoom: 13
  105.       },
  106.       {
  107.          name: 'Torre del Mar',
  108.          lat: 36.7389255,
  109.          lon: -4.095758,
  110.          zoom: 13
  111.       },
  112.       {
  113.          name: 'Torremolinos',
  114.          lat: 36.6265478,
  115.          lon: -4.4949926,
  116.          zoom: 14
  117.       },
  118.       {
  119.          name: 'La Carihuela',
  120.          lat: 36.6138008,
  121.          lon: -4.5055638,
  122.          zoom: 14
  123.       },
  124.       {
  125.          name: 'Torrox',
  126.          lat: 36.7350957,
  127.          lon: -3.9585594,
  128.          zoom: 13
  129.       },
  130.    ];
  131.  
  132.    citiesObject.forEach((city) => {
  133.       if (document.getElementById("city").value === city.name) {
  134.          myLatlng = new google.maps.LatLng(city.lat,city.lon,);
  135.          myOptions = {
  136.             zoom: city.zoom,
  137.             center: myLatlng,
  138.             mapTypeId: google.maps.MapTypeId.ROADMAP
  139.          };
  140.       }
  141.    });
  142.  
  143.    var map = new google.maps.Map(document.getElementById('map'), myOptions);
  144.  
  145.    infowindow = new google.maps.InfoWindow({
  146.       content: "holding..."
  147.    });
  148.  
  149.    <?php
  150.    $paradax = '';
  151.    $paradasarray = json_decode($paradasarray);
  152.    foreach ($paradasarray as $parada){
  153.       $hora = $parada->horarecogida->{'0'};
  154.       $paradax = $parada->nombreparada;
  155.       $idparada = $parada->idparada->{'0'};
  156.       ?>
  157.  
  158.       var marker = new google.maps.Marker({
  159.          position: new google.maps.LatLng(<?php echo $parada->lat->{'0'} . ", " . $parada->lng->{'0'}  ?>),
  160.          map: map,
  161.          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>"
  162.       });
  163.  
  164.       markers.push(marker);
  165.  
  166.       google.maps.event.addListener(marker, 'click', function () {
  167.          infowindow.setContent(this.html);
  168.          infowindow.open(map, this);
  169.       });
  170.       <?php
  171. }
  172.    ?>
  173.  
  174.    google.maps.event.addListener(infowindow, 'domready', function() {
  175.       defineListener();
  176.    });
  177. }
  178. </script>
  179. <script src="https://maps.googleapis.com/maps/api/js?key=AImikey&callback=initMap&language=en"
  180. async defer></script>
  181. <p style="display: none;" id="elegidotexto"><?php echo $lang_elegido; ?>
  182.    <span id="elegidotexto2"> </span></p>
  183.    <input type="hidden" id="pickupoint" name="pickupoint" value="">
  184.    <input type="hidden" id="puntorecoger" name="puntorecoger" value="">
  185.    <script>
  186.    function defineListener() {
  187.       var elegirParadaEl = document.getElementById("elegirparada");
  188.  
  189.       elegirParadaEl.addEventListener("change", function(){
  190.          // Get the checkbox
  191.          var checkBox = document.getElementById("elegirparada");
  192.          // Get the output text
  193.          var text = document.getElementById("elegidotexto");
  194.  
  195.          // If the checkbox is checked, display the output text
  196.          if (checkBox.checked == true){
  197.             text.style.display = "block";
  198.          } else {
  199.             text.style.display = "none";
  200.          }
  201.          document.getElementById("elegidotexto2").innerHTML = document.getElementById("paradax").value;
  202.          document.getElementById("puntorecoger").value= document.getElementById("paradax").value;
  203.          document.getElementById("pickupoint").value = document.getElementById("idparada").value;                                 // window.sessionStorage.setItem('pickupointguardar', document.getElementById("idparada").value);
  204.       });
  205.       var divErrortext = document.getElementById('errortext'),
  206.       valid = true;
  207.       var element2 = document.querySelector('#elegirparada');
  208.       if (element2 !== null) {
  209.          element2.addEventListener('click', () => {
  210.               if (document.solicitud.plazasDisponibles.value == ''){
  211.                 console.log(element2)
  212.                   divErrortext.innerHTML="<span style='color:red'><?php echo $lang_val_choosedate ?></span>";
  213.                   return false;
  214.               }
  215.          })
  216.       }
  217.    }
  218.    var element = document.querySelector('#city');
  219.    element.addEventListener('change', () => {
  220.       initMap()
  221.    })
  222.  
  223.    </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

Última edición por helenp; 27/11/2018 a las 12:56
  #2 (permalink)  
Antiguo 27/11/2018, 13:17
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.418
Antigüedad: 3 años, 5 meses
Puntos: 256
Respuesta: Actualizar marcadores en google map

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/
__________________
[email protected]
HITCEL

Última edición por xfxstudios; 27/11/2018 a las 13:54
  #3 (permalink)  
Antiguo 27/11/2018, 14:22
 
Fecha de Ingreso: mayo-2009
Mensajes: 371
Antigüedad: 9 años, 6 meses
Puntos: 5
Respuesta: Actualizar marcadores en google map

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
  #4 (permalink)  
Antiguo 27/11/2018, 15:47
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.418
Antigüedad: 3 años, 5 meses
Puntos: 256
Respuesta: Actualizar marcadores en google map

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/
__________________
[email protected]
HITCEL
  #5 (permalink)  
Antiguo 27/11/2018, 23:14
 
Fecha de Ingreso: mayo-2009
Mensajes: 371
Antigüedad: 9 años, 6 meses
Puntos: 5
Respuesta: Actualizar marcadores en google map

Cita:
Iniciado por xfxstudios Ver Mensaje
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!
  #6 (permalink)  
Antiguo 28/11/2018, 06:05
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.418
Antigüedad: 3 años, 5 meses
Puntos: 256
Respuesta: Actualizar marcadores en google map

Corregido el enlace
http://jsfiddle.net/xfxstudios/cf02mz6u/14/
__________________
[email protected]
HITCEL
  #7 (permalink)  
Antiguo 29/11/2018, 13:49
 
Fecha de Ingreso: mayo-2009
Mensajes: 371
Antigüedad: 9 años, 6 meses
Puntos: 5
Respuesta: Actualizar marcadores en google map

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.
  #8 (permalink)  
Antiguo 29/11/2018, 16:41
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.418
Antigüedad: 3 años, 5 meses
Puntos: 256
Respuesta: Actualizar marcadores en google map

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

Código Javascript:
Ver original
  1. var xmlhttp = new XMLHttpRequest();
  2. xmlhttp.open('GET', 'https://api.myjson.com/bins/ya8qy', true);
  3. xmlhttp.onreadystatechange = function() {
  4.     if (xmlhttp.readyState == 4) {
  5.         if(xmlhttp.status == 200) {
  6.             var obj = JSON.parse(xmlhttp.responseText);
  7.             //en obj estan los datos
  8.          }
  9.     }
  10. };
  11. xmlhttp.send(null);
__________________
[email protected]
HITCEL



La zona horaria es GMT -6. Ahora son las 14:47.