Explicación: Maps
Completion requirements
4. Añadir marker inicial
app.ts
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { GoogleMapsModule } from '@angular/google-maps';
@Component({
selector: 'app-root',
imports: [RouterOutlet, GoogleMapsModule],
templateUrl: './app.html',
styleUrl: './app.css'
})
export class App {
protected readonly title = signal('maps-demo');
center: google.maps.LatLngLiteral = {
lat: 40.4168,
lng: -3.7038
};
zoom = 13;
// marker inicial
markerPosition = signal<google.maps.LatLngLiteral>(this.center);
markerLabel = signal('Inicio');
}
app.html
<google-map
height="520px"
width="100%"
[center]="center"
[zoom]="zoom"
>
<map-marker
[position]="markerPosition()"
[label]="markerLabel()"
/>
</google-map>