Gmap component

[MahmoudTarek44]

Google map component doesn't appear anywhere in v16 is it removed or is there an alternative?

[cagataycivici]

It was removed because it is easier to use GMap API directly, having a component is likely limit your use cases as GMap API is really huge. There are probably other GMap Angular components but I strongly suggest using it directly so you can full control.

https://www.c-sharpcorner.com/article/how-to-integrate-google-maps-in-angular-14-app/

[ThoSap]

The @angular/google-maps guide above that @cagataycivici linked is good, but I would not load the GMaps API JS script with the key in the index.html as described in step 4. in the guide, as this would slow down the initial load of the app if the GMap is not needed to be displayed immediatley.
https://github.com/angular/components/tree/16.2.4/src/google-maps/google-map
https://github.com/angular/components/tree/16.2.4/src/dev-app/google-map

I did it like this a few weeks ago, which has the advantage of only loading the GMaps API JS script in the components that need it once (without fetching it multiple times after it was loaded the first time) by using
private googleMapsService = inject(GoogleMapsService); <-- since Angular 14
or inject it in the constructor as you are used to.

Install the following npm packages:
https://www.npmjs.com/package/@angular/google-maps
https://www.npmjs.com/package/@googlemaps/js-api-loader
https://www.npmjs.com/package/@types/google.maps <-- is already a dependency of @angular/google-maps

import { inject, Injectable } from '@angular/core';

// Services
import { MessageService } from 'primeng/api';

// Google Maps
import { Loader } from '@googlemaps/js-api-loader';
import LatLngLiteral = google.maps.LatLngLiteral;

@Injectable({
  providedIn: 'root',
})
export class GoogleMapsService {

  private static readonly API_KEY = '<<<YOUR_SECRET_API_KEY_HERE>>>';

  private position!: LatLngLiteral;

  private messageService = inject(MessageService);

  constructor() {
    navigator.geolocation.getCurrentPosition((pos: GeolocationPosition) => {
      this.position = {
        lat: pos.coords.latitude,
        lng: pos.coords.longitude,
      };
    });
  }

  loadAPI(): Promise<boolean> {
    const mapLoader = new Loader({
      apiKey: GoogleMapsService.API_KEY,
      // https://developers.google.com/maps/documentation/javascript/libraries#libraries-for-dynamic-library-import
      libraries: [
        'core',
        'elevation',
        'maps',
        'marker',
      ],
      region: 'IT', // Change your region to not load the Maps JavaScript API from maps.googleapis.com with the bias for application behavior towards the United States
      retries: 10,
      version: 'quarterly', // 'weekly' (default), 'quarterly' or a specific GMaps version number
    });

    return mapLoader.importLibrary('core')
      .then(() => {
        console.log('Google Maps API loaded!');
        return true;
      })
      .catch((e) => {
        this.messageService.add({
          key: 'fss',
          severity: 'error',
          sticky: true,
          summary: 'Google Maps API',
          detail: `Loading the Google Maps API failed with ${e}`,
        });
        return false;
      });
  }

  getCurrentPosition(): LatLngLiteral {
    return this.position;
  }

}

Example component that uses the GoogleMapsService, which additionally shows a PrimeNG skeleton if the API was not fully loaded yet.
FYI do not use changeDetection: ChangeDetectionStrategy.OnPush, with GMaps as it causes issues.

import { Component, DestroyRef, inject, OnInit, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

// PrimeNG Modules
import { SkeletonModule } from 'primeng/skeleton';

// Services
import { GoogleMapsService } from '@core/services/google-maps.service';
import { LocationService } from '@core/services/location.service'; // Service I've implemented to load all locations

// Domain
import { Location } from '@core/domain/location'; // Type I've created

// Google Maps
import { GoogleMap, GoogleMapsModule } from '@angular/google-maps';
import LatLngLiteral = google.maps.LatLngLiteral;

@Component({
  standalone: true,
  imports: [
    CommonModule,
    // PrimeNG Modules
    SkeletonModule,
    // Google Maps
    GoogleMapsModule,
  ],
  template: `
    <google-map *ngIf="mapsApiLoaded else mapsApiLoadingAnimation"
                [center]="mapCenter"
                [height]="height"
                [options]="mapOptions"
                width="100%">
      <map-marker *ngFor="let location of locations"
                  [position]="getPosition(location)">
      </map-marker>
    </google-map>
    <ng-template #mapsApiLoadingAnimation>
      <p-skeleton [height]="height" width="100%"></p-skeleton>
    </ng-template>
  `,
  styleUrls: ['./location-map.component.scss'],
})
export class LocationMapComponent implements OnInit {

  @ViewChild(GoogleMap)
  private map!: GoogleMap;

  // Google Map
  height = '75vh';
  mapsApiLoaded!: boolean;
  locations!: Location[];
  mapCenter!: LatLngLiteral;
  mapOptions: google.maps.MapOptions = {
    clickableIcons: false,
    disableDoubleClickZoom: false,
    fullscreenControl: false,
    mapTypeId: 'terrain',
    maxZoom: 20,
    minZoom: 3,
    streetViewControl: false,
    scrollwheel: true,
    zoom: 15,
    zoomControl: true,
  };

  private destroyRef = inject(DestroyRef);
  private googleMapsService = inject(GoogleMapsService);
  private locationService = inject(LocationService); // Service I've implemented to load all locations

  ngOnInit(): void {
    this.mapCenter = this.googleMapsService.getCurrentPosition();

    this.googleMapsService.loadAPI()
      .then(() => {
        this.mapsApiLoaded = true;
        this.loadLocations();
      })
      .catch(() => this.mapsApiLoaded = false);
  }

  loadLocations(): void {
    this.locationService.getLocations()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (locations: Location[]) => {
          this.locations = [...locations];

          // Fit all the markers by calculating the bounds of all locations
          const latLngBounds = new google.maps.LatLngBounds();
          for (const location of locations) {
            latLngBounds.extend({ lat: location.latitude as number, lng: location.longitude as number });
          }
          this.map.fitBounds(latLngBounds);
        },
      });
  }

  getLabel(name: string | null | undefined): google.maps.MarkerLabel | string {
    if (!name) {
      return '';
    }

    return {
      text: name ?? '',
      fontFamily: 'Poppins',
    };
  }

  getTitle(name: string | null | undefined): string {
    return name ?? '';
  }

  getPosition(location: Location): LatLngLiteral {
    return {
      lat: location.latitude as number,
      lng: location.longitude as number,
    };
  }

}

This guide is also quite good, but also imports the GMaps JS API in the index.html:
https://timdeschryver.dev/blog/google-maps-as-an-angular-component#angular

[MahmoudTarek44]

Thank you so much @ThoSap for this in detail explanation, of course loading the map only when it is required is much better.
I'm sure I'll try to follow this approach and learn something new.
Also the last mentioned link is really good and there are a full documentation for the google maps module.
Thank you one more time 🩵

[MahmoudTarek44]

@ThoSap

I've followed the steps and get that error.

[ThoSap]

@MahmoudTarek44 did you add the following?

<google-map *ngIf="mapsApiLoaded else mapsApiLoadingAnimation"
  ...

[MahmoudTarek44]

@ThoSap Thank you for your assistance, idk why but it is working now with no changes

[kyjus25]

Removed via primefaces/primeng#12781 (primefaces/primeng@b8f6364)

The replacement would be using the Angular module provided by Google directly

We've also had great success with Leaflet, a free alternative to Google Maps. It uses OpenStreetMap

[MahmoudTarek44]

Thank you @kyjus25, I guess I would go for the google provided one as it is the best option also for the future support.
However, I'll try you suggested alternative. If not used, I'm sure I'll something new here.

[melloware]

@cagataycivici since its been removed from others I wonder if we should consider removing GMAP from PrimeFaces JSF?

[cagataycivici]

It makes sense but we should deprecate first in v14 and remove in v15. I'm +1.

[melloware]

Will do

[cagataycivici]

Main issue with Map is client side API is huge -> https://developers.google.com/maps/documentation, Imagine wrapping it in Java and converting it to JS with the java renderer. Still I'm not sure about removing anything from PF, it is all about stability.