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"
           (mapClick)="openInfo(markerElem, marker.info)">
       </map-marker>
     }
</google-map>

<!--ts files-->
  import { Component } from '@angular/core';
  import { GoogleMap, MapMarker } from '@angular/google-maps';
  
  interface IMarkerPosition {
    lat: number;
    lng: number;
  }
  
  interface IMarkerLabel {
    color: string;
    text: string;
  }
  
  interface IGoogleMapMarkers {
    position: IMarkerPosition;
    label: IMarkerLabel;
  }
  
  @Component({
    selector: 'app-google-map',
    templateUrl: './google-map.html',
    styleUrls: ['./google-map.scss'],
    imports: [GoogleMap, MapMarker],
  })
  export class GoogleMaps {
    public asiaMapOptions: google.maps.MapOptions = {
      center: { lat: 47.5162, lng: 100.2167 },
      zoom: 3,
    };
  
    public worldMapOption: google.maps.MapOptions = {
      center: { lat: 0, lng: 0 },
      zoom: 2,
    };
  
    public usaMapOptions: google.maps.MapOptions = {
      center: { lat: 37.0902, lng: -95.7129 },
      zoom: 4,
    };
  
    public indiaMapOptions: google.maps.MapOptions = {
      center: { lat: 20.5937, lng: 78.9629 },
      zoom: 4,
    };
  
    public markers: IGoogleMapMarkers[];
    public zoom: number;
  
    constructor() {
      this.markers = [];
  
      this.markers.push({
        position: {
          lat: 32.4279,
          lng: 53.688,
        },
        label: {
          color: 'black',
          text: 'Iran',
        },
      });
  
      this.markers.push({
        position: {
          lat: 33.9391,
          lng: 67.71,
        },
        label: {
          color: 'black',
          text: 'Afghanistan',
        },
      });
  
      this.markers.push({
        position: {
          lat: 23.0225,
          lng: 72.5714,
        },
        label: {
          color: 'black',
          text: 'Ahmadabad',
        },
      });
    }
  }
  

<!--ts file-->
  import { Component } from '@angular/core';

  import { LeafletModule } from '@bluehalo/ngx-leaflet';
  import * as L from 'leaflet';
  
  @Component({
    selector: 'app-leaflet-map',
    templateUrl: './leaflet-map.html',
    styleUrls: ['./leaflet-map.scss'],
    imports: [LeafletModule],
  })
  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),
    };
  
    //Second map
    layersControl = {
      baseLayers: {
        'Open Street Map': L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: '...',
        }),
        'Open Cycle Map': L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: '...',
        }),
      },
      overlays: {
        'Big Circle': L.circle([46.95, -122], { radius: 5000 }),
        'Big Square': L.polygon([
          [46.8, -121.55],
          [46.9, -121.55],
          [46.9, -121.7],
          [46.8, -121.7],
        ]),
      },
    };
  
    options2 = {
      layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 50,
          attribution: '...',
        }),
      ],
      zoom: 5,
      center: L.latLng(46.879966, -121.726909),
    };
  
    //Third map
    map: L.Map;
    options3 = {
      layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: '',
        }),
      ],
      zoom: 7,
      center: L.latLng(47.482023, -1),
    };
  
    //Forth map
    map4: L.Map;
    homeCoords = {
      lat: 23.810331,
      lon: 90.412521,
    };
  
    popupText = 'Some popup text';
  
    markerIcon = {
      icon: L.icon({
        iconSize: [25, 41],
        iconAnchor: [10, 41],
        popupAnchor: [2, -40],
        iconUrl: 'assets/images/marker-icon.png',
        shadowUrl: 'assets/images/marker-shadow.png',
      }),
    };
  
    options4 = {
      layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
          maxZoom: 18,
          attribution: '',
        }),
      ],
      zoom: 5,
      center: L.latLng(this.homeCoords.lat, this.homeCoords.lon),
    };
  
    initMarkers() {
      const popupInfo = `${this.popupText}`;
      L.marker([this.homeCoords.lat, this.homeCoords.lon], this.markerIcon)
        .addTo(this.map4)
        .bindPopup(popupInfo);
    }
  
    onMapReady4(map: L.Map) {
      this.map4 = map;
      this.initMarkers();
    }
  }
  

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