npm install @angular/google-maps

<google-map width="100%" height="100%" [options]="asiaMapOptions">
  @for(marker of markers; track marker){
    <map-marker [position]="marker.position" [label]="marker.label"></map-marker>
  }
</google-map>

import { Component } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';

import { IGoogleMapMarkers } from '../../../shared/interface/common';

export interface IGoogleMapMarkers {
  position: IMarkerPosition;
  label: IMarkerLabel;
}

export interface IMarkerPosition {
  lat: number;
  lng: number;
}

export interface IMarkerLabel {
  color: string;
  text: string;
}
@Component({
  selector: 'app-google-map',
  imports: [GoogleMapsModule],
  templateUrl: './google-map.html',
  styleUrl: './google-map.scss',
})
export class GoogleMap {
  public asiaMapOptions: google.maps.MapOptions = {
    center: { lat: 47.5162, lng: 100.2167 },
    zoom: 3,
  };

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

  constructor() {
    this.markers = [];

    this.markers.push({
      position: {
        lat: 32.4279,
        lng: 53.688,
      },
      label: {
        color: 'black',
        text: 'Iran',
      },
    });
  }
}

npm uninstall @angular/google-maps

npm install leaflet

npm install @bluehalo/ngx-leaflet

npm install --save-dev @types/leaflet

<div style="height: 500px; z-index: 0;" leaflet [leafletOptions]="options1"></div>

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import * as L from 'leaflet';

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

export class LeafletMap {

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

npm uninstall leaflet

npm uninstall @bluehalo/ngx-leaflet

npm uninstall --save-dev @types/leaflet