npm i @angular/google-maps

<!-- htlm file-->
<google-map height="500px" width="100%" [zoom]="zoom">
     @for(marker of markers; track marker){
       <map-marker #markerElem [position]="marker.position"
           [label]="marker.label" [title]="marker.title" [options]="marker.options">
       </map-marker>
     }
</google-map>

<!--ts files-->
import { Component, ViewChild } from '@angular/core';
import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";

@Component({
    selector: 'app-google-map',
    templateUrl: './google-map.component.html',
    styleUrl: './google-map.component.scss',
    imports: [GoogleMapsModule, PageWrapperComponent, CardComponent]
})

export class GoogleMapComponent {

  public markers: any[];
  public zoom: number;

  constructor() {
    this.markers = [];
    this.zoom = 2;
  }

  ngOnInit() {
    this.markers.push({
      position: {
        lat: 35.717,
        lng: 139.731
      },
      label: {
        color: "black",
        text: "Madrid"
      },
      Option: {
        draggable: true,
        animation: google.maps.Animation.DROP,
      }
    });

    this.markers.push({
      position: {
        lat: 48.8615515,
        lng: 2.3112233
      },
      label: {
        color: "black",
        text: "Paris"
      }
    });
  }

  //Street View
  @ViewChild(GoogleMap) map!: GoogleMap;

  ngAfterViewInit() {
    const streetView = this.map.getStreetView();

    streetView.setOptions({
      position: { lat: 38.9938386, lng: -77.2515373 },
      pov: { heading: 70, pitch: -10 },
    });

    streetView.setVisible(true);
  }

  getBounds(markers: any[]) {
    let north;
    let south;
    let east;
    let west;

    for (const marker of markers) {
      north = north !== undefined ? Math.max(north, marker.position.lat) : marker.position.lat;
      south = south !== undefined ? Math.min(south, marker.position.lat) : marker.position.lat;
      east = east !== undefined ? Math.max(east, marker.position.lng) : marker.position.lng;
      west = west !== undefined ? Math.min(west, marker.position.lng) : marker.position.lng;
    };

    const bounds = { north, south, east, west };

    return bounds;
  }
}

<!--ts file-->
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import * as L from 'leaflet';
import { PageWrapperComponent } from "../../../shared/components/page-wrapper/page-wrapper.component";
import { CardComponent } from "../../../shared/components/card/card.component";

@Component({
    selector: 'app-leaflet-map',
    templateUrl: './leaflet-map.component.html',
    styleUrl: './leaflet-map.component.scss',
    imports: [LeafletModule, PageWrapperComponent, CardComponent]
})

export class LeafletMapComponent {

  constructor(private http: HttpClient) {}

  // First map options
  options1 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '...',
      }),
    ],
    zoom: 5,
    center: L.latLng(46.879966, -121.726909),
  }
}

<!-- import css global files -->
@import "leaflet/dist/leaflet.css";