fix(project): removed agm core logic

package.json

@@ -45,6 +45,7 @@
     "@angular/flex-layout": "^14.0.0-beta.41",
     "@angular/forms": "^16.2.2",
     "@angular/material": "^16.2.1",
+    "@angular/google-maps": "^16.2.1",
     "@angular/platform-browser": "^16.2.2",
     "@angular/platform-browser-dynamic": "^16.2.2",
     "@angular/platform-server": "^16.2.2",
@@ -58,7 +59,7 @@
     "gulp": "^4.0.2",
     "http-server": "^0.12.3",
     "karma": "^6.3.4",
-    "ngx-markdown": "^10.1.1",
+    "ngx-markdown": "^16.0.0",
     "rxjs": "^6.6.7",
     "tslib": "^2.2.0",
     "zone.js": "~0.13.1"
@@ -147,4 +148,4 @@
       }
     }
   }
-}
+}

projects/angular-material-extensions/google-maps-autocomplete/package.json

@@ -49,20 +49,19 @@
     "test:watch": "../../../node_modules/.bin/jest --coverage --watch"
   },
   "peerDependencies": {
-    "@angular/common": "^15.x",
-    "@angular/core": "^15.x",
-    "@angular/platform-browser": "^15.x",
-    "@angular/flex-layout": "^14.0.0-beta.41",
-    "@angular/forms": "^15.x",
-    "@angular/cdk": "^15.x",
-    "@angular/material": "^15.x",
-    "@agm/core": "^3.0.0-beta.0",
+    "@angular/common": "^16.x",
+    "@angular/core": "^16.x",
+    "@angular/platform-browser": "^16.x",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "^16.x",
+    "@angular/cdk": "^16.x",
+    "@angular/material": "^16.x",
     "@types/googlemaps": "~3.43.3",
     "rxjs": "^7.x",
     "zone.js": "~0.11.x"
   },
   "engines": {
-    "node": ">=14.0.0"
+    "node": ">=16.0.0"
   },
   "release-it": {
     "github": {

projects/angular-material-extensions/google-maps-autocomplete/src/lib/component/mat-google-maps-autocomplete.component.ts

@@ -4,6 +4,7 @@ import {MapsAPILoader} from '@agm/core';
 import {MatValidateAddressDirective} from '../directives/address-validator/mat-address-validator.directive';
 import {Location} from '../interfaces/location.interface';
 import {GermanAddress} from '../interfaces';
+
 import PlaceResult = google.maps.places.PlaceResult;
 import AutocompleteOptions = google.maps.places.AutocompleteOptions;
 

projects/angular-material-extensions/google-maps-autocomplete/src/lib/directives/mat-google-maps-autocomplete.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Directive,
   ElementRef,
@@ -8,14 +9,17 @@ import {
   Inject,
   Input,
   NgZone,
+  OnDestroy,
   OnInit,
   Output,
-  PLATFORM_ID
+  PLATFORM_ID,
+  ViewChild
 } from '@angular/core';
 import {ControlValueAccessor, FormControl, NG_VALIDATORS, Validators} from '@angular/forms';
-import {MapsAPILoader} from '@agm/core';
 import {GermanAddress, Location} from '../interfaces';
 import {isPlatformBrowser} from '@angular/common';
+import {ScriptLoaderService} from "../services/script-loader.service";
+import {ApiKeyToken} from "../tokens";
 import PlaceResult = google.maps.places.PlaceResult;
 import AutocompleteOptions = google.maps.places.AutocompleteOptions;
 
@@ -30,7 +34,12 @@ import AutocompleteOptions = google.maps.places.AutocompleteOptions;
     }
   ]
 })
-export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueAccessor {
+export class MatGoogleMapsAutocompleteDirective implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+
+  @ViewChild('inputField')
+  inputField!: ElementRef;
+
+  autocomplete: google.maps.places.Autocomplete | undefined;
 
   @Input()
   address: PlaceResult | string;
@@ -86,31 +95,24 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
   };
 
   constructor(@Inject(PLATFORM_ID) public platformId: string,
+              @Inject(ApiKeyToken)
+              public apiKey: string,
               public elemRef: ElementRef,
-              public mapsAPILoader: MapsAPILoader,
               private cf: ChangeDetectorRef,
+              private loaderService: ScriptLoaderService,
               private ngZone: NgZone) {
   }
 
-  ngOnInit(): void {
-    if (isPlatformBrowser(this.platformId)) {
-      const options: AutocompleteOptions = {
-        // types: ['address'],
-        // componentRestrictions: {country: this.country},
-        placeIdOnly: this.placeIdOnly,
-        strictBounds: this.strictBounds,
-        // types: this.types,
-        type: this.type
-      };
+  ngOnDestroy(): void {
+    throw new Error('Method not implemented.');
+  }
 
-      // tslint:disable-next-line:no-unused-expression
-      this.country ? options.componentRestrictions = {country: this.country} : null;
-      // tslint:disable-next-line:no-unused-expression
-      this.country ? options.types = this.types : null;
+  ngAfterViewInit(): void {
+    this.loadMap();
+  }
 
-      this.autoCompleteOptions = Object.assign(this.autoCompleteOptions, options);
-      this.initGoogleMapsAutocomplete();
-    }
+  ngOnInit(): void {
+    console.log("this.apiKey = ", this.apiKey)
   }
 
   validate(fc: FormControl) {
@@ -124,78 +126,73 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
   }
 
   public initGoogleMapsAutocomplete() {
-    this.mapsAPILoader
-      .load()
-      .then(() => {
-        const autocomplete = new google.maps.places.Autocomplete(this.elemRef.nativeElement, this.autoCompleteOptions);
-        autocomplete.addListener('place_changed', () => {
-          this.ngZone.run(() => {
-            // get the place result
-            const place: PlaceResult = autocomplete.getPlace();
-
-            const germanAddress: GermanAddress = {
-              gmID: place.id,
-              icon: place.icon,
-              url: place.url,
-              placeID: place.place_id,
-              displayAddress: place.formatted_address,
-              name: place.name,
-              vicinity: place.vicinity,
-              locality: {},
-              state: {},
-              country: {},
-              geoLocation: {latitude: -1, longitude: -1},
-            };
-
-            if (place.geometry && place.geometry.location) {
-              germanAddress.geoLocation.latitude = place.geometry.location.lat();
-              germanAddress.geoLocation.longitude = place.geometry.location.lng();
-            }
-
-            place.address_components.forEach(value => {
-              if (value.types.indexOf('street_number') > -1) {
-                germanAddress.streetNumber = value.short_name;
-              }
-              if (value.types.indexOf('route') > -1) {
-                germanAddress.streetName = value.long_name;
-              }
-              if (value.types.indexOf('postal_code') > -1) {
-                germanAddress.postalCode = Number(value.short_name);
-              }
-              if (value.types.indexOf('sublocality') > -1) {
-                germanAddress.sublocality = value.long_name;
-              }
-              if (value.types.indexOf('locality') > -1) {
-                germanAddress.locality.long = value.long_name;
-                germanAddress.locality.short = value.short_name;
-              }
-              if (value.types.indexOf('administrative_area_level_1') > -1) {
-                germanAddress.state.long = value.long_name;
-                germanAddress.state.short = value.short_name;
-              }
-              if (value.types.indexOf('country') > -1) {
-                germanAddress.country.long = value.long_name;
-                germanAddress.country.short = value.short_name;
-              }
-              if (value.types.indexOf('administrative_area_level_3') > -1) {
-                germanAddress.locality.short = value.short_name;
-              }
-            });
-
-            this.onGermanAddressMapped.emit(germanAddress);
-
-            this.value = place.formatted_address;
-            this.address = place.formatted_address;
-            this.onAutocompleteSelected.emit(place);
-            this.onLocationSelected.emit(
-              {
-                latitude: place.geometry.location.lat(),
-                longitude: place.geometry.location.lng()
-              });
-          });
+    const autocomplete = new google.maps.places.Autocomplete(this.elemRef.nativeElement, this.autoCompleteOptions);
+    autocomplete.addListener('place_changed', () => {
+      this.ngZone.run(() => {
+        // get the place result
+        const place: PlaceResult = autocomplete.getPlace();
+
+        const germanAddress: GermanAddress = {
+          gmID: place.id,
+          icon: place.icon,
+          url: place.url,
+          placeID: place.place_id,
+          displayAddress: place.formatted_address,
+          name: place.name,
+          vicinity: place.vicinity,
+          locality: {},
+          state: {},
+          country: {},
+          geoLocation: {latitude: -1, longitude: -1},
+        };
+
+        if (place.geometry && place.geometry.location) {
+          germanAddress.geoLocation.latitude = place.geometry.location.lat();
+          germanAddress.geoLocation.longitude = place.geometry.location.lng();
+        }
+
+        place.address_components.forEach(value => {
+          if (value.types.indexOf('street_number') > -1) {
+            germanAddress.streetNumber = value.short_name;
+          }
+          if (value.types.indexOf('route') > -1) {
+            germanAddress.streetName = value.long_name;
+          }
+          if (value.types.indexOf('postal_code') > -1) {
+            germanAddress.postalCode = Number(value.short_name);
+          }
+          if (value.types.indexOf('sublocality') > -1) {
+            germanAddress.sublocality = value.long_name;
+          }
+          if (value.types.indexOf('locality') > -1) {
+            germanAddress.locality.long = value.long_name;
+            germanAddress.locality.short = value.short_name;
+          }
+          if (value.types.indexOf('administrative_area_level_1') > -1) {
+            germanAddress.state.long = value.long_name;
+            germanAddress.state.short = value.short_name;
+          }
+          if (value.types.indexOf('country') > -1) {
+            germanAddress.country.long = value.long_name;
+            germanAddress.country.short = value.short_name;
+          }
+          if (value.types.indexOf('administrative_area_level_3') > -1) {
+            germanAddress.locality.short = value.short_name;
+          }
         });
-      })
-      .catch((err) => console.log(err));
+
+        this.onGermanAddressMapped.emit(germanAddress);
+
+        this.value = place.formatted_address;
+        this.address = place.formatted_address;
+        this.onAutocompleteSelected.emit(place);
+        this.onLocationSelected.emit(
+          {
+            latitude: place.geometry.location.lat(),
+            longitude: place.geometry.location.lng()
+          });
+      });
+    });
   }
 
   registerOnChange(fn: any): void {
@@ -215,4 +212,40 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
     }
   }
 
+  loadMap(): void {
+    this.loaderService.loadScript(`https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&libraries=places`)
+      .then(() => {
+        this.initMap();
+      })
+      .catch(error => console.error('Google Maps loading failed: ', error));
+  }
+
+  initMap() {
+    if (isPlatformBrowser(this.platformId)) {
+
+      console.log("on after view init --> ", this.elemRef.nativeElement)
+
+      this.autocomplete = new google.maps.places.Autocomplete(
+        this.elemRef.nativeElement
+      );
+
+      const options: AutocompleteOptions = {
+        // types: ['address'],
+        // componentRestrictions: {country: this.country},
+        placeIdOnly: this.placeIdOnly,
+        strictBounds: this.strictBounds,
+        // types: this.types,
+        type: this.type
+      };
+
+      // tslint:disable-next-line:no-unused-expression
+      this.country ? options.componentRestrictions = {country: this.country} : null;
+      // tslint:disable-next-line:no-unused-expression
+      this.country ? options.types = this.types : null;
+
+      this.autoCompleteOptions = Object.assign(this.autoCompleteOptions, options);
+      this.initGoogleMapsAutocomplete();
+    }
+  }
+
 }

projects/angular-material-extensions/google-maps-autocomplete/src/lib/mat-google-maps-autocomplete.module.ts

@@ -1,5 +1,5 @@
 import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
+import {InjectionToken, ModuleWithProviders, NgModule} from '@angular/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
@@ -8,6 +8,8 @@ import {MatValidateAddressDirective} from './directives/address-validator/mat-ad
 // tslint:disable-next-line:max-line-length
 import {MatGoogleMapsAutocompleteComponent, MatSearchGoogleMapsAutocompleteComponent} from './component';
 import {MatInputModule} from '@angular/material/input';
+import {ApiKeyToken} from "./tokens";
+
 
 
 @NgModule({
@@ -41,4 +43,23 @@ import {MatInputModule} from '@angular/material/input';
   ]
 })
 export class MatGoogleMapsAutocompleteModule {
+
+  constructor() {
+  }
+
+  static forRoot(
+    apiKey: string,
+  ): ModuleWithProviders<MatGoogleMapsAutocompleteModule> {
+
+    return {
+      ngModule: MatGoogleMapsAutocompleteModule,
+      providers:
+        [
+          {
+            provide: ApiKeyToken,
+            useValue: apiKey
+          },
+        ]
+    };
+  }
 }

projects/angular-material-extensions/google-maps-autocomplete/src/lib/tokens/index.ts

@@ -0,0 +1,3 @@
+import {InjectionToken} from "@angular/core";
+
+export const ApiKeyToken = new InjectionToken<string>('apiKey');

projects/angular-material-extensions/google-maps-autocomplete/src/public-api.ts

@@ -4,6 +4,7 @@
 
 export * from './lib/helpers/parser';
 export * from './lib/interfaces';
+export * from './lib/tokens';
 export * from './lib/component';
 export * from './lib/directives/mat-google-maps-autocomplete.directive';
 export * from './lib/directives/address-validator/mat-address-validator.directive';

src/app/app.module.ts

@@ -3,7 +3,6 @@ import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core'
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {AgmCoreModule} from '@agm/core';
 import {HttpClientModule} from '@angular/common/http';
 
 import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';
@@ -44,8 +43,7 @@ const googleMapsParams = {
     }),
     Angulartics2Module.forRoot(),
     MarkdownModule.forRoot(),
-    AgmCoreModule.forRoot(googleMapsParams),
-    MatGoogleMapsAutocompleteModule,
+    MatGoogleMapsAutocompleteModule.forRoot('YOUR API KEY'),
     FlexLayoutModule,
     FormsModule,
     ReactiveFormsModule,