Explicación: Maps

1. Explicación

Explicación 

Tabla de precios:

https://developers.google.com/maps/billing-and-pricing/pricing?hl=es-419

1000 al mes es gratuito 

2. Crear proyecto

Google cloud console

https://console.cloud.google.com/

ng new maps-demo --standalone --routing --style=css
cd maps-demo
npm i @angular/google-maps@20 

otra opción 

npm install @angular/google-maps --legacy-peer-deps

3. Cargar el script de Google Maps

En src/index.html añade (cambia TU_API_KEY):

<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&libraries=places"></script>

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;
}

app.html

<h1>Google Maps demo</h1>

<google-map
  height="500px"
  width="100%"
  [center]="center"
  [zoom]="zoom">
</google-map>

<router-outlet />

app.html

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>