npm i @angular/google-maps

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

import { Component, viewChild } from '@angular/core';
import { GoogleMap, MapInfoWindow, MapMarker } from '@angular/google-maps';

@Component({
  selector: 'app-google-map',
  templateUrl: './google-map.html',
  styleUrls: ['./google-map.scss'],
  imports: [GoogleMap, MapMarker],
})
export class GoogleMaps {
  public markers = [
    {
      position: { lat: 35.717, lng: 139.731 },
      label: { color: 'black', text: 'Tokyo' },
      title: 'Tokyo Marker',
      options: { draggable: true },
      info: 'Welcome to Tokyo!',
    },
    {
      position: { lat: 48.8615515, lng: 2.3112233 },
      label: { color: 'black', text: 'Paris' },
      title: 'Paris Marker',
      options: {},
      info: 'Hello from Paris!',
    },
  ];

  public zoom = 2;
  public infoContent = '';

  readonly map = viewChild.required(GoogleMap);
  readonly infoWindow = viewChild.required(MapInfoWindow);

  openInfo(marker: MapMarker, info: string) {
    this.infoContent = info;
    this.infoWindow().open(marker);
  }

  ngAfterViewInit() {
    const streetView = this.map().getStreetView();
    streetView.setOptions({
      position: { lat: 38.9938386, lng: -77.2515373 },
      pov: { heading: 70, pitch: -10 },
    });
    streetView.setVisible(true);
  }
}

import { HttpClient } from '@angular/common/http';
import { Component, inject } from '@angular/core';

import { LeafletModule } from '@bluehalo/ngx-leaflet';
import { GeoJsonObject } from 'geojson';
import * as L from 'leaflet'

@Component({
    selector: 'app-leaflet-map',
    templateUrl: './leaflet-map.html',
    styleUrls: ['./leaflet-map.scss'],
    standalone: true,
    imports: [LeafletModule]
})
export class LeafletMap {
  private http = inject(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 'leaflet/dist/leaflet.css';