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 { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { GoogleMapsModule } from '@angular/google-maps';

@Component({
  selector: 'app-google-map',
  imports: [CommonModule, 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: any[];
  public zoom: number;

  constructor() {
    
    this.markers = [];

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

      this.markers.push({
        position: {
          lat: 33.9391,
          lng: 67.7100
        },
        label: {
          color: "black",
          text: "Afghanistan"
        },
      });

      this.markers.push({
        position: {
          lat: 23.0225,
          lng: 72.5714
        },
        label: {
          color: "black",
          text: "Ahmedabad"
        },
      });
  }

}

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