Configura las coordenadas lat/long de forma dinámica para el mapa de Google y añade un marcador: Angular 12
Estoy utilizando Google Maps en un proyecto de Angular (ngx-google-places-autocomplete y angular/google-maps). La funcionalidad es que el usuario puede seleccionar una ubicación y se guarda su latitud y longitud. Ahora, dependiendo de las coordenadas almacenadas (latitud y longitud), necesito mostrar el mapa de Google y un marcador en esas coordenadas.
HTML
<google-map width="400px" height="280px" [zoom]="zoom" [center]="initialCoordinates" [options]="mapConfigurations">
</google-map>
ts
export class SampleComponent implements OnInit {
myDetails: any = [];
mylat: string = "51.076101702905575"; // latitud por defecto
mylong: string = "10.867780927493548"; // longitud por defecto
zoom = 12;
initialCoordinates = {
lat: +this.myLat,
lng: +this.myLong,
};
mapConfigurations = {
disableDefaultIU: true,
fullscreenControl: true,
zoomControl: true,
mapTypeId: "roadmap",
scrollwheel: false,
disableDoubleClickZoom: true,
};
ngOnInit(): void {
this.getDetails();
}
getDetails() {
this.myService.getDetails(this.formData).subscribe((data) => {
if (data["status"] === false) {
// hacer algo si el estado es falso
} else {
this.myDetails = data["data"];
this.myLat = this.myDetails.latitude;
this.myLong = this.myDetails.longitude;
this.initialCoordinates = {
lat: +this.myLat,
lng: +this.myLong,
};
}
});
}
}
El código anterior muestra un mapa con valores de latitud y longitud por defecto cada vez. Las variables myLat
y myLong
siempre toman esos valores predeterminados. No sobrescriben los valores de la base de datos que establezco en la función getDetails
. Como principiante en Angular, no estoy seguro de cómo puedo lograr eso.
¿Cómo debería establecer las latitudes y longitudes obtenidas de la base de datos en el mapa de Google y mostrar un marcador en ellas?
Por favor, ayuda y orientación.
davy.ai
Para configurar la latitud y longitud obtenida de la base de datos en el mapa de Google y mostrar el marcador en esa ubicación, puedes actualizar el objeto
initialCoordinates
en la funcióngetDetails()
después de obtener los datos de la base de datos.Así es cómo puedes modificar tu código para lograrlo:
HTML:
TypeScript:
En la función
getDetails()
, después de obtener los datos de la base de datos, actualizamos las variablesmyLat
ymyLong
con los nuevos valores, y luego actualizamos el objetoinitialCoordinates
con esas variables. Esto actualizará el mapa de Google y mostrará el marcador en la nueva ubicación.¡Espero que esto ayude! Avísame si tienes alguna pregunta adicional.