3

Utilizo PHP con el Framework CodeIgniter 3.1.0 conectándome a PHPMYADMIN 10.1.13-*****. Por ende, deseo que cuando se inserte en la base de datos la latitud y la longitud de un marcador nuevo, se vea inmediatamente reflejado en la aplicación web, sin necesidad de recargar la pestaña.

VISTA

<script>
    //Marcadores
    var neighborhoods = [
<?php if (count($locations) != 0) { ?>
    <?php for ($i = 0; $i < count($locations); $i++) { ?>
        <?php for ($f = 0; $f < count($locations[$i]); $f++) { ?>
                {lat: <?= $locations[$i][$f]['lat'] ?>, lng: <?= $locations[$i][$f]['lng'] ?>, km: <?= $locations[$i][$f]['km'] ?>, fecha: <?= $locations[$i][$f]['km'] ?>}<?php if (count($locations) != $i) { ?>,<?php } ?>
        <?php } ?>
    <?php } ?>
<?php } ?>
    ];
            function initMap() {
                //CARGO MAPA CON UN CENTRO
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: <?= $center['0']['lat'] ?>, lng: <?= $center['0']['lng'] ?>},
                    zoom: 17
                });

                // LINEA
                var flightPlanCoordinates = neighborhoods;
                var flightPath = new google.maps.Polyline({
                    path: flightPlanCoordinates,
                    geodesic: true,
                    strokeColor: '#FF0000',
                    strokeOpacity: 1.0,
                    strokeWeight: 2
                });
                flightPath.setMap(map);
                //FIN LINEA   
            }  

</script>
<meta http-equiv="refresh" content="5" />
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MI_CLAVE&signed_in=true&callback=initMap">
</script>

Trataré de ser lo más breve y específico posible. Le comento que estoy trabajando en una aplicación de traking por gps y se me produce el siguiente problema: - cuando intento actualizar el marcador de posición este se me actualiza, pero también se me actualiza el mapa completo (perdiendo el zoom que había realizado y mostrándome nuevamente los continentes completos). Entonces, como puedo hacer para actualizar sólo los marcadores de posición, pero sin que se recarga el mapa cada vez que actualizo.

9
  • Hola tratare de ser lo más breve y específico posible. Le comento que estoy trabajando en una aplicación de traking por gps y se me produce el siguiente problema: - cuando intento actualizar el marcador de posición este se me actualiza, pero también se me actualiza el mapa completo (perdiendo el zoom que había realizado y mostrándome nuevamente los continentes completos). Entonces, como puedo hacer para actualizar sólo los marcadores de posición, pero sin que se recarga el mapa cada vez que actualizo. Desde ya muchas gracias. Saludos, Isaías Díaz
    – Isaías
    Commented el 30 nov. 2016 a las 18:30
  • Como puedo colocar mas caracteres en mi caso HTML y PHP, a un nuevo comentario ??
    – Isaías
    Commented el 30 nov. 2016 a las 19:09
  • Estimado como puedo escribir mas caracteres especificados, o me puede dar su correo, y no puedo usar el botón "{ }" o Ctrl+K, para agregar codigo.
    – Isaías
    Commented el 30 nov. 2016 a las 19:17
  • 1
    Ver esta imagen de ayuda: i.sstatic.net/urUrW.png
    – Mariano
    Commented el 30 nov. 2016 a las 19:20
  • Ya agregue el código de la vista a mi consulta, espero que les sirva para resolver mi inquietud.
    – Isaías
    Commented el 30 nov. 2016 a las 20:00

1 respuesta 1

2

En tu implementación, la declaración de los markers se está escribiendo inline mediante PHP. No tienes cómo refrescarla sin refrescar la página.

Lo que debieras hacer, en cambio, es tener un endpoint únicamente para entregar el contenido de los markers:

<?php

$neighborhoods = [];
if (count($locations) != 0) {
  for ($i = 0; $i < count($locations); $i++) { 
    for ($f = 0; $f < count($locations[$i]); $f++) { 
      $neighborhoods[]=[
         'lat'=> $locations[$i][$f]['lat'], 
         'lng'=> $locations[$i][$f]['lng'], 
         'km'=>$locations[$i][$f]['km'], 
         'fecha'=> $locations[$i][$f]['fecha']
      ];
    }
  }
}
header('Content-Type: application/json');
echo json_encode($neighborhoods);

Y en vez de asumir que la variable neighborhoods está presente en la página, debes pedirla a este endpoint mediante ajax, y refrescar tu polilínea de acuerdo al resultado obtenido.

function initMap() {
  //CARGO MAPA CON UN CENTRO
  map = new google.maps.Map(document.getElementById('map'), { 
          center: { 
            lat: <?= $center['0']['lat'] ?>, 
            lng: <?= $center['0']['lng'] ?>
          },zoom: 17 });

  jQuery.ajax({
     url:'neighborhoods.php'
     dataType:'json'
  }).then(function(neighborhoods) {

    // LINEA
    var flightPlanCoordinates = neighborhoods;
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      geodesic: true,
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });
    flightPath.setMap(map);
    //FIN LINEA   
  });
}  

Podrías, por ejemplo, asociar un botón para gatillar ese evento ajax después de la carga inicial, redibujando la polilínea acorde a lo que te entregó el endpoint. Como la polilínea ya existe, sólo tendrías que usar el método setPath(neighborhoods) para que ésta dibuje los nuevos puntos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.