<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 { 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',
  imports: [GoogleMap, MapMarker],
  templateUrl: './google-map.html',
  styleUrls: ['./google-map.scss'],
})
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',
      },
    });
  }
}

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

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',
  imports: [LeafletModule],
  templateUrl: './leaflet-map.html',
  styleUrl: './leaflet-map.scss',
})
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),
  };

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

  //Second map
  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;
  json: GeoJsonObject | GeoJsonObject[] | null | undefined;
  options3 = {
    layers: [
      L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '',
      }),
    ],
    zoom: 7,
    center: L.latLng(47.482019, -1),
  };
  onMapReady(map: L.Map) {
    this.http.get('assets/data/map/polygon.json').subscribe(json => {
      this.json = json;
      L.geoJSON(this.json).addTo(map);
    });
  }

  //Forth map
  map4: L.Map | L.LayerGroup;
  homeCoords = {
    lat: 23.810331,
    lon: 90.412521,
  };

  popupText = 'Some popup text';

  markerIcon = {
    icon: L.icon({
      iconSize: [25, 41],
      iconAnchor: [10, 41],
      popupAnchor: [2, -40],
      // specify the path here
      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();
  }
}