Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dda725a

Browse files
author
Anthony Nahas
committed
fix(project): removed agm core logic
1 parent b5b1479 commit dda725a

File tree

11 files changed

+1827
-1320
lines changed

11 files changed

+1827
-1320
lines changed

‎README.md

Lines changed: 58 additions & 96 deletions
Large diffs are not rendered by default.

‎package-lock.json

Lines changed: 1585 additions & 1104 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"@angular/flex-layout": "^14.0.0-beta.41",
4646
"@angular/forms": "^16.2.2",
4747
"@angular/material": "^16.2.1",
48+
"@angular/google-maps": "^16.2.1",
4849
"@angular/platform-browser": "^16.2.2",
4950
"@angular/platform-browser-dynamic": "^16.2.2",
5051
"@angular/platform-server": "^16.2.2",
@@ -58,7 +59,7 @@
5859
"gulp": "^4.0.2",
5960
"http-server": "^0.12.3",
6061
"karma": "^6.3.4",
61-
"ngx-markdown": "^10.1.1",
62+
"ngx-markdown": "^16.0.0",
6263
"rxjs": "^6.6.7",
6364
"tslib": "^2.2.0",
6465
"zone.js": "~0.13.1"
@@ -147,4 +148,4 @@
147148
}
148149
}
149150
}
150-
}
151+
}

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,19 @@
4949
"test:watch": "../../../node_modules/.bin/jest --coverage --watch"
5050
},
5151
"peerDependencies": {
52-
"@angular/common": "^15.x",
53-
"@angular/core": "^15.x",
54-
"@angular/platform-browser": "^15.x",
55-
"@angular/flex-layout": "^14.0.0-beta.41",
56-
"@angular/forms": "^15.x",
57-
"@angular/cdk": "^15.x",
58-
"@angular/material": "^15.x",
59-
"@agm/core": "^3.0.0-beta.0",
52+
"@angular/common": "^16.x",
53+
"@angular/core": "^16.x",
54+
"@angular/platform-browser": "^16.x",
55+
"@angular/flex-layout": "^15.0.0-beta.42",
56+
"@angular/forms": "^16.x",
57+
"@angular/cdk": "^16.x",
58+
"@angular/material": "^16.x",
6059
"@types/googlemaps": "~3.43.3",
6160
"rxjs": "^7.x",
6261
"zone.js": "~0.11.x"
6362
},
6463
"engines": {
65-
"node": ">=14.0.0"
64+
"node": ">=16.0.0"
6665
},
6766
"release-it": {
6867
"github": {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {MapsAPILoader} from '@agm/core';
44
import {MatValidateAddressDirective} from '../directives/address-validator/mat-address-validator.directive';
55
import {Location} from '../interfaces/location.interface';
66
import {GermanAddress} from '../interfaces';
7+
78
import PlaceResult = google.maps.places.PlaceResult;
89
import AutocompleteOptions = google.maps.places.AutocompleteOptions;
910

Lines changed: 125 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
AfterViewInit,
23
ChangeDetectorRef,
34
Directive,
45
ElementRef,
@@ -8,14 +9,17 @@ import {
89
Inject,
910
Input,
1011
NgZone,
12+
OnDestroy,
1113
OnInit,
1214
Output,
13-
PLATFORM_ID
15+
PLATFORM_ID,
16+
ViewChild
1417
} from '@angular/core';
1518
import {ControlValueAccessor, FormControl, NG_VALIDATORS, Validators} from '@angular/forms';
16-
import {MapsAPILoader} from '@agm/core';
1719
import {GermanAddress, Location} from '../interfaces';
1820
import {isPlatformBrowser} from '@angular/common';
21+
import {ScriptLoaderService} from "../services/script-loader.service";
22+
import {ApiKeyToken} from "../tokens";
1923
import PlaceResult = google.maps.places.PlaceResult;
2024
import AutocompleteOptions = google.maps.places.AutocompleteOptions;
2125

@@ -30,7 +34,12 @@ import AutocompleteOptions = google.maps.places.AutocompleteOptions;
3034
}
3135
]
3236
})
33-
export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueAccessor {
37+
export class MatGoogleMapsAutocompleteDirective implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
38+
39+
@ViewChild('inputField')
40+
inputField!: ElementRef;
41+
42+
autocomplete: google.maps.places.Autocomplete | undefined;
3443

3544
@Input()
3645
address: PlaceResult | string;
@@ -86,31 +95,24 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
8695
};
8796

8897
constructor(@Inject(PLATFORM_ID) public platformId: string,
98+
@Inject(ApiKeyToken)
99+
public apiKey: string,
89100
public elemRef: ElementRef,
90-
public mapsAPILoader: MapsAPILoader,
91101
private cf: ChangeDetectorRef,
102+
private loaderService: ScriptLoaderService,
92103
private ngZone: NgZone) {
93104
}
94105

95-
ngOnInit(): void {
96-
if (isPlatformBrowser(this.platformId)) {
97-
const options: AutocompleteOptions = {
98-
// types: ['address'],
99-
// componentRestrictions: {country: this.country},
100-
placeIdOnly: this.placeIdOnly,
101-
strictBounds: this.strictBounds,
102-
// types: this.types,
103-
type: this.type
104-
};
106+
ngOnDestroy(): void {
107+
throw new Error('Method not implemented.');
108+
}
105109

106-
// tslint:disable-next-line:no-unused-expression
107-
this.country ? options.componentRestrictions = {country: this.country} : null;
108-
// tslint:disable-next-line:no-unused-expression
109-
this.country ? options.types = this.types : null;
110+
ngAfterViewInit(): void {
111+
this.loadMap();
112+
}
110113

111-
this.autoCompleteOptions = Object.assign(this.autoCompleteOptions, options);
112-
this.initGoogleMapsAutocomplete();
113-
}
114+
ngOnInit(): void {
115+
console.log("this.apiKey = ", this.apiKey)
114116
}
115117

116118
validate(fc: FormControl) {
@@ -124,78 +126,73 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
124126
}
125127

126128
public initGoogleMapsAutocomplete() {
127-
this.mapsAPILoader
128-
.load()
129-
.then(() => {
130-
const autocomplete = new google.maps.places.Autocomplete(this.elemRef.nativeElement, this.autoCompleteOptions);
131-
autocomplete.addListener('place_changed', () => {
132-
this.ngZone.run(() => {
133-
// get the place result
134-
const place: PlaceResult = autocomplete.getPlace();
135-
136-
const germanAddress: GermanAddress = {
137-
gmID: place.id,
138-
icon: place.icon,
139-
url: place.url,
140-
placeID: place.place_id,
141-
displayAddress: place.formatted_address,
142-
name: place.name,
143-
vicinity: place.vicinity,
144-
locality: {},
145-
state: {},
146-
country: {},
147-
geoLocation: {latitude: -1, longitude: -1},
148-
};
149-
150-
if (place.geometry && place.geometry.location) {
151-
germanAddress.geoLocation.latitude = place.geometry.location.lat();
152-
germanAddress.geoLocation.longitude = place.geometry.location.lng();
153-
}
154-
155-
place.address_components.forEach(value => {
156-
if (value.types.indexOf('street_number') > -1) {
157-
germanAddress.streetNumber = value.short_name;
158-
}
159-
if (value.types.indexOf('route') > -1) {
160-
germanAddress.streetName = value.long_name;
161-
}
162-
if (value.types.indexOf('postal_code') > -1) {
163-
germanAddress.postalCode = Number(value.short_name);
164-
}
165-
if (value.types.indexOf('sublocality') > -1) {
166-
germanAddress.sublocality = value.long_name;
167-
}
168-
if (value.types.indexOf('locality') > -1) {
169-
germanAddress.locality.long = value.long_name;
170-
germanAddress.locality.short = value.short_name;
171-
}
172-
if (value.types.indexOf('administrative_area_level_1') > -1) {
173-
germanAddress.state.long = value.long_name;
174-
germanAddress.state.short = value.short_name;
175-
}
176-
if (value.types.indexOf('country') > -1) {
177-
germanAddress.country.long = value.long_name;
178-
germanAddress.country.short = value.short_name;
179-
}
180-
if (value.types.indexOf('administrative_area_level_3') > -1) {
181-
germanAddress.locality.short = value.short_name;
182-
}
183-
});
184-
185-
this.onGermanAddressMapped.emit(germanAddress);
186-
187-
this.value = place.formatted_address;
188-
this.address = place.formatted_address;
189-
this.onAutocompleteSelected.emit(place);
190-
this.onLocationSelected.emit(
191-
{
192-
latitude: place.geometry.location.lat(),
193-
longitude: place.geometry.location.lng()
194-
});
195-
});
129+
const autocomplete = new google.maps.places.Autocomplete(this.elemRef.nativeElement, this.autoCompleteOptions);
130+
autocomplete.addListener('place_changed', () => {
131+
this.ngZone.run(() => {
132+
// get the place result
133+
const place: PlaceResult = autocomplete.getPlace();
134+
135+
const germanAddress: GermanAddress = {
136+
gmID: place.id,
137+
icon: place.icon,
138+
url: place.url,
139+
placeID: place.place_id,
140+
displayAddress: place.formatted_address,
141+
name: place.name,
142+
vicinity: place.vicinity,
143+
locality: {},
144+
state: {},
145+
country: {},
146+
geoLocation: {latitude: -1, longitude: -1},
147+
};
148+
149+
if (place.geometry && place.geometry.location) {
150+
germanAddress.geoLocation.latitude = place.geometry.location.lat();
151+
germanAddress.geoLocation.longitude = place.geometry.location.lng();
152+
}
153+
154+
place.address_components.forEach(value => {
155+
if (value.types.indexOf('street_number') > -1) {
156+
germanAddress.streetNumber = value.short_name;
157+
}
158+
if (value.types.indexOf('route') > -1) {
159+
germanAddress.streetName = value.long_name;
160+
}
161+
if (value.types.indexOf('postal_code') > -1) {
162+
germanAddress.postalCode = Number(value.short_name);
163+
}
164+
if (value.types.indexOf('sublocality') > -1) {
165+
germanAddress.sublocality = value.long_name;
166+
}
167+
if (value.types.indexOf('locality') > -1) {
168+
germanAddress.locality.long = value.long_name;
169+
germanAddress.locality.short = value.short_name;
170+
}
171+
if (value.types.indexOf('administrative_area_level_1') > -1) {
172+
germanAddress.state.long = value.long_name;
173+
germanAddress.state.short = value.short_name;
174+
}
175+
if (value.types.indexOf('country') > -1) {
176+
germanAddress.country.long = value.long_name;
177+
germanAddress.country.short = value.short_name;
178+
}
179+
if (value.types.indexOf('administrative_area_level_3') > -1) {
180+
germanAddress.locality.short = value.short_name;
181+
}
196182
});
197-
})
198-
.catch((err) => console.log(err));
183+
184+
this.onGermanAddressMapped.emit(germanAddress);
185+
186+
this.value = place.formatted_address;
187+
this.address = place.formatted_address;
188+
this.onAutocompleteSelected.emit(place);
189+
this.onLocationSelected.emit(
190+
{
191+
latitude: place.geometry.location.lat(),
192+
longitude: place.geometry.location.lng()
193+
});
194+
});
195+
});
199196
}
200197

201198
registerOnChange(fn: any): void {
@@ -215,4 +212,40 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueA
215212
}
216213
}
217214

215+
loadMap(): void {
216+
this.loaderService.loadScript(`https://maps.googleapis.com/maps/api/js?key=${this.apiKey}&libraries=places`)
217+
.then(() => {
218+
this.initMap();
219+
})
220+
.catch(error => console.error('Google Maps loading failed: ', error));
221+
}
222+
223+
initMap() {
224+
if (isPlatformBrowser(this.platformId)) {
225+
226+
console.log("on after view init --> ", this.elemRef.nativeElement)
227+
228+
this.autocomplete = new google.maps.places.Autocomplete(
229+
this.elemRef.nativeElement
230+
);
231+
232+
const options: AutocompleteOptions = {
233+
// types: ['address'],
234+
// componentRestrictions: {country: this.country},
235+
placeIdOnly: this.placeIdOnly,
236+
strictBounds: this.strictBounds,
237+
// types: this.types,
238+
type: this.type
239+
};
240+
241+
// tslint:disable-next-line:no-unused-expression
242+
this.country ? options.componentRestrictions = {country: this.country} : null;
243+
// tslint:disable-next-line:no-unused-expression
244+
this.country ? options.types = this.types : null;
245+
246+
this.autoCompleteOptions = Object.assign(this.autoCompleteOptions, options);
247+
this.initGoogleMapsAutocomplete();
248+
}
249+
}
250+
218251
}

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {CommonModule} from '@angular/common';
2-
import {NgModule} from '@angular/core';
2+
import {InjectionToken,ModuleWithProviders,NgModule} from '@angular/core';
33
import {FlexLayoutModule} from '@angular/flex-layout';
44
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
55
import {MatIconModule} from '@angular/material/icon';
@@ -8,6 +8,8 @@ import {MatValidateAddressDirective} from './directives/address-validator/mat-ad
88
// tslint:disable-next-line:max-line-length
99
import {MatGoogleMapsAutocompleteComponent, MatSearchGoogleMapsAutocompleteComponent} from './component';
1010
import {MatInputModule} from '@angular/material/input';
11+
import {ApiKeyToken} from "./tokens";
12+
1113

1214

1315
@NgModule({
@@ -41,4 +43,23 @@ import {MatInputModule} from '@angular/material/input';
4143
]
4244
})
4345
export class MatGoogleMapsAutocompleteModule {
46+
47+
constructor() {
48+
}
49+
50+
static forRoot(
51+
apiKey: string,
52+
): ModuleWithProviders<MatGoogleMapsAutocompleteModule> {
53+
54+
return {
55+
ngModule: MatGoogleMapsAutocompleteModule,
56+
providers:
57+
[
58+
{
59+
provide: ApiKeyToken,
60+
useValue: apiKey
61+
},
62+
]
63+
};
64+
}
4465
}
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {InjectionToken} from "@angular/core";
2+
3+
export const ApiKeyToken = new InjectionToken<string>('apiKey');

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
export * from './lib/helpers/parser';
66
export * from './lib/interfaces';
7+
export * from './lib/tokens';
78
export * from './lib/component';
89
export * from './lib/directives/mat-google-maps-autocomplete.directive';
910
export * from './lib/directives/address-validator/mat-address-validator.directive';

‎src/app/app.module.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA} from '@angular/core'
33

44
import {AppComponent} from './app.component';
55
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
6-
import {AgmCoreModule} from '@agm/core';
76
import {HttpClientModule} from '@angular/common/http';
87

98
import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';
@@ -44,8 +43,7 @@ const googleMapsParams = {
4443
}),
4544
Angulartics2Module.forRoot(),
4645
MarkdownModule.forRoot(),
47-
AgmCoreModule.forRoot(googleMapsParams),
48-
MatGoogleMapsAutocompleteModule,
46+
MatGoogleMapsAutocompleteModule.forRoot('YOUR API KEY'),
4947
FlexLayoutModule,
5048
FormsModule,
5149
ReactiveFormsModule,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /