1

Tengo un mapa de Google, agrego y elimino los marcadores al hacer clic. Al final necesito poder obtener todos los marcadores que el usuario coloco en el mapa.

Lo agrego de la siguiente forma:

marcadores: any[] = []

placeMarker(position, map) {
  ....
  var marker = new google.maps.Marker({
    position: position,
    map: map,
    draggable: true,
  });

  marker.addListener("dblclick", function (e) {
    marker.setMap(null);
  });

  this.marcadores.push(marker)
}   

¿Alguna orientación?

7
  • 1
    Guardalos en un array
    – Yussef
    Commented el 22 abr. 2023 a las 1:37
  • Al inicio pon let marcadores = []; y al final pon marcadores.push(marker); Commented el 22 abr. 2023 a las 1:47
  • si, eso hago, pero al momento de que el usuario elimine el marcador como hago para que se elimine del array marcadores?? Commented el 22 abr. 2023 a las 1:51
  • Donde almacenas ese array? En el localStorage?
    – René
    Commented el 22 abr. 2023 a las 2:05
  • Lo eliminas con botones? Haciendo doble click sobre el elemento? Está en una tabla? Agrega un poco más de código para poder responder mejor
    – René
    Commented el 22 abr. 2023 a las 2:09

2 respuestas 2

1

Para eliminar puedes realizar lo siguiente:

function removeMarker(marker) {
  marker.setMap(null); // Eliminar el marcador del mapa
  var index = marcadores.indexOf(marker);
  if (index !== -1) {
    marcadores.splice(index, 1); // Eliminar el marcador del array
  }
}

La función removeMarker busca el índice del marcador en el array marcadores y lo elimina usando el método splice(). Luego, se llama al método setMap(null) para eliminar el marcador del mapa.

//En el método addListener le asocias la función
marker.addListener('dblclick', function() {
  removeMarker(marker);
});
2
  • marker.addListener('dblclick', function() { this.removeMarker(marker); }); me da el siguiente error (estoy usando angular) Property 'removeMarker' does not exist on type 'Marker'.ts(2339) any removeMarker(marker) { marker.setMap(null); // Eliminar el marcador del mapa var index = marcadores.indexOf(marker); if (index !== -1) { marcadores.splice(index, 1); // Eliminar el marcador del array } } Commented el 22 abr. 2023 a las 2:48
  • Si estas usando Angular hubieras agregado la etiqueta.
    – René
    Commented el 22 abr. 2023 a las 3:02
1

En Angular:

Suponiendo que lo tienes en una lista (aunque no importa mucho) el código sería el siguiente:

HTML

<li (dblclick)="borrarMarcador(i)" *ngFor="let marcador of marcadores; let i = index">

Component

Acá te sugiero que no uses del tipo any para tu array, dale un tipo. Create tu propia interfaz o utiliza la de Google Maps.

  borrarMarcador(i: number) {
    this.marcadores[i].setMap(null);
    this.marcadores.splice(i, 1);
    this.guardarMarcadores();
  }
}

Vuelves a llamar la función de guardar marcadores para que se actualice la fuente de tus datos (si es que los recibes de alguna parte)

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.