Recargar marcadores en la API de Google Maps

Solución:

Algunas cosas que debe hacer / cosas que he cambiado de su código original:

1. Utilice coordenadas lat / lng válidas para sus marcadores (1121.28747820854187, por ejemplo, no es un lng válido)
2. Cree una variable global para su mapa (más fácil de hacer referencia en su secuencia de comandos)
3. Crea una matriz para contener tus marcadores
4. He agregado una animación de marcador animation: google.maps.Animation.DROP, a sus marcadores, para que pueda ver cuándo se recargan, y un recargar marcadores botón para llamar a la función de recarga.

Básicamente, lo que quieres hacer es:

1. Cree cada marcador dentro del setMarkers función
2. Empuje cada marcador a la markers formación
3. Cuando recarga sus marcadores, recorra su matriz de marcadores y llame setMap(null) en cada marcador para eliminarlo del mapa
4. Una vez hecho esto, llama setMarkers de nuevo para volver a dibujar tus marcadores

Código actualizado:

var map;
var markers = []; // Create a marker array to hold your markers
var beaches = [
    ['Bondi Beach', 10, 10, 4],
    ['Coogee Beach', 10, 11, 5],
    ['Cronulla Beach', 10, 12, 3],
    ['Manly Beach', 10, 13, 2],
    ['Maroubra Beach', 10, 14, 1]
];

function setMarkers(locations) {

    for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            title: beach[0],
            zIndex: beach[3]
        });

        // Push marker to markers array
        markers.push(marker);
    }
}

function reloadMarkers() {

    // Loop through markers and set map to null for each
    for (var i=0; i<markers.length; i++) {

        markers[i].setMap(null);
    }

    // Reset the markers array
    markers = [];

    // Call set markers to re-add markers
    setMarkers(beaches);
}

function initialize() {

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(10,12),
        mapTypeId: google.maps.MapTypeId.SATELLITE
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    setMarkers(beaches);

    // Bind event listener on button to reload markers
    document.getElementById('reloadMarkers').addEventListener('click', reloadMarkers);
}

initialize();

Ejemplo de trabajo:

Demostración de JSFiddle

Para recargar los marcadores, cuando los cree, empújelos a una matriz.

Luego, cree una función en la que iterar a través de la matriz, estableciendo el mapa de marcadores como nulo. Después de esto, borre la matriz.

Editar: Asumiré que devolverá un JSON con la siguiente estructura en su PHP

{
  beaches: [
            [
              "Bondi Beach",
              -12.890542,
              120.274856,
              4
            ],
            [
              "Other Beach",
              -12.890542,
              120.274856,
              5
            ]
           ]
}

También supongo que usará jQuery (solo para simplificar la llamada ajax y la iteración json)

<script>
    var arrMarkers = [];

    var beaches = [
      ['Bondi Beach', -12.890542, 120.274856, 4],
      ['Coogee Beach', -12.923036, 520.259052, 5],
      ['Cronulla Beach', -12.028249, 1221.157507, 3],
      ['Manly Beach', -12.80010128657071, 1121.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 121.259302, 1]
    ];

    function setMarkers(map, locations) {
      for (var i = 0; i < locations.length; i++) {
        var beach = locations[i];
        var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: beach[0],
            zIndex: beach[3]
        });

        arrMarkers.push(marker);
      }
    }

    function initialize() {
      var mapOptions = {
        zoom: 3,
        center: new google.maps.LatLng(38.77417, -9.13417),
        mapTypeId: google.maps.MapTypeId.SATELLITE
      }
      var map = new google.maps.Map(document.getElementById('map-canvas'),
                                    mapOptions);

      setMarkers(map, beaches);
    }

    function removeMarkers(){
     var i;
     for(i=0;i<arrMarkers.length;i++){
       arrMarkers[i].setMap(null);
     }
     arrMarkers = [];

    }

    google.maps.event.addDomListener(window, 'load', initialize);

    setInterval(function() { 
       updateTheMarkers();
    }, 5000);

    function updateTheMarkers(){
      $.ajax({
      type: "GET",
      url: "/yourphp.php",
              success: function (data) {
                  //We remove the old markers
                  removeMarkers();
                  var jsonObj = $.parseJSON(data),
                      i;

                  beaches =[];//Erasing the beaches array

                  //Adding the new ones
                  for(i=0;i < jsonObj.beaches.length; i++) {
                    beaches.push(jsonObj.beaches[i]);
                  }

                  //Adding them to the map
                  setMarkers(map, beaches);
              }
         });
    }

</script>

Básicamente, ahora, cada 5 segundos su javascript hace una solicitud ajax a su php, su php devolverá un json actualizado con las nuevas playas, eliminará los marcadores antiguos, completará la matriz con las nuevas ubicaciones y generará los nuevos marcadores.

---

---

Utiliza Nuestro Buscador