Fix search-map component using @angular/google-maps

src/app/pages/maps/gmaps/gmaps.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-gmaps',
   styleUrls: ['./gmaps.component.scss'],
-  templateUrl: './gmaps.component.html'
+  templateUrl: './gmaps.component.html',
 })
 export class GmapsComponent {
   public readonly position = { lat: 51.678418, lng: 7.809007 };

src/app/pages/maps/search-map/entity/Location.ts

@@ -1,4 +0,0 @@
-export class Location {
-  constructor(public latitude: number = 53.9, public longitude: number = 27.5667) {
-  }
-}

src/app/pages/maps/search-map/entity/position.model.ts

@@ -0,0 +1,6 @@
+export class PositionModel {
+  public constructor(
+    public lat: number = 53.9,
+    public lng: number = 27.5667,
+  ) {}
+}

src/app/pages/maps/search-map/map/map.component.html

@@ -1,7 +1,3 @@
-<!-- <agm-map [latitude]="latitude"
-         [longitude]="longitude"
-         [scrollwheel]="false"
-         [zoom]="zoom">
-  <agm-marker [latitude]="latitude"
-              [longitude]="longitude"></agm-marker>
-</agm-map> -->
+<google-map [center]="position" [zoom]="zoom" width="100%" height="36.5625rem">
+  <map-marker [position]="position"></map-marker>
+</google-map>

src/app/pages/maps/search-map/map/map.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { Location } from '../entity/Location';
+import { PositionModel } from '../entity/position.model';
 
 @Component({
   selector: 'ngx-map',
@@ -7,23 +7,25 @@ import { Location } from '../entity/Location';
   styleUrls: ['./map.component.scss'],
 })
 export class MapComponent implements OnInit {
-  latitude: number;
-  longitude: number;
-  zoom: number;
+  public position: PositionModel = null;
+  public zoom: number = 1;
 
   @Input()
-  public set searchedLocation(searchedLocation: Location) {
-    this.latitude = searchedLocation.latitude;
-    this.longitude = searchedLocation.longitude;
+  public set searchedPosition(position: PositionModel) {
+    if (!position) return;
+
+    console.dir(position);
+    this.position = position;
     this.zoom = 12;
   }
 
-  ngOnInit(): void {
+  public ngOnInit(): void {
     // set up current location
     if ('geolocation' in navigator) {
       navigator.geolocation.getCurrentPosition((position) => {
-        this.searchedLocation = new Location(
-          position.coords.latitude, position.coords.longitude,
+        this.searchedPosition = new PositionModel(
+          position.coords.latitude,
+          position.coords.longitude,
         );
       });
     }

src/app/pages/maps/search-map/search-map.component.html

@@ -1,7 +1,7 @@
 <nb-card>
   <nb-card-header>Google Maps with search</nb-card-header>
   <nb-card-body>
-    <ngx-search (positionChanged)="updateLocation($event)"></ngx-search>
-    <ngx-map [searchedLocation]="searchedLocation"></ngx-map>
+    <ngx-search (positionChanged)="setPosition($event)"></ngx-search>
+    <ngx-map [searchedPosition]="searchedPosition"></ngx-map>
   </nb-card-body>
 </nb-card>

src/app/pages/maps/search-map/search-map.component.ts

@@ -1,15 +1,14 @@
 import { Component } from '@angular/core';
-import { Location } from './entity/Location';
+import { PositionModel } from './entity/position.model';
 
 @Component({
   selector: 'ngx-search-map',
   templateUrl: './search-map.component.html',
 })
 export class SearchMapComponent {
+  public searchedPosition: PositionModel = new PositionModel();
 
-  searchedLocation: Location = new Location();
-
-  updateLocation(event: Location) {
-    this.searchedLocation = new Location(event.latitude, event.longitude);
+  public setPosition(position: PositionModel): void {
+    this.searchedPosition = position;
   }
 }

src/app/pages/maps/search-map/search/search.component.ts

@@ -1,7 +1,5 @@
 import { Component, ElementRef, EventEmitter, NgZone, OnInit, Output, ViewChild } from '@angular/core';
-// import { MapsAPILoader } from '@agm/core';
-import { Location } from '../entity/Location';
-
+import { PositionModel } from '../entity/position.model';
 
 @Component({
   selector: 'ngx-search',
@@ -9,36 +7,34 @@ import { Location } from '../entity/Location';
 })
 export class SearchComponent implements OnInit {
 
-  @Output() positionChanged = new EventEmitter<Location>();
+  @Output()
+  public readonly positionChanged: EventEmitter<PositionModel> = new EventEmitter<PositionModel>();
 
   @ViewChild('search', { static: true })
   public searchElementRef: ElementRef;
 
-  constructor(// private mapsAPILoader: MapsAPILoader,
-              private ngZone: NgZone) {
-  }
+  constructor(private readonly ngZone: NgZone) {}
 
   ngOnInit() {
-    // load Places Autocomplete
-    // this.mapsAPILoader.load().then(() => {
-    //   const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
-    //     types: ['address'],
-    //   });
-    //   autocomplete.addListener('place_changed', () => {
-    //     this.ngZone.run(() => {
-    //       // get the place result
-    //       const place: google.maps.places.PlaceResult = autocomplete.getPlace();
+    const autocomplete = new google.maps.places.Autocomplete(
+      this.searchElementRef.nativeElement, { types: ['address'] },
+    );
 
-    //       // verify result
-    //       if (place.geometry === undefined || place.geometry === null) {
-    //         return;
-    //       }
+    autocomplete.addListener('place_changed', () => {
+      this.ngZone.run(() => {
+        // get the place result
+        const place: google.maps.places.PlaceResult = autocomplete.getPlace();
 
-    //       this.positionChanged.emit(
-    //         new Location(place.geometry.location.lat(),
-    //           place.geometry.location.lng()));
-    //     });
-    //   });
-    // });
+        // verify result
+        if (place.geometry === undefined || place.geometry === null) {
+          return;
+        }
+
+        this.positionChanged.emit(new PositionModel(
+          place.geometry.location.lat(),
+          place.geometry.location.lng(),
+        ));
+      });
+    });
   }
 }

src/app/pages/tables/smart-table/smart-table.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 // import { LocalDataSource } from 'ng2-smart-table';
 
-import { SmartTableData } from '../../../@core/data/smart-table';
+// import { SmartTableData } from '../../../@core/data/smart-table';
 
 @Component({
   selector: 'ngx-smart-table',
@@ -55,10 +55,10 @@ export class SmartTableComponent {
 
   // source: LocalDataSource = new LocalDataSource();
 
-  constructor(private service: SmartTableData) {
+  // constructor(private service: SmartTableData) {
   //   const data = this.service.getData();
   //   this.source.load(data);
-  }
+  // }
 
   onDeleteConfirm(event): void {
     if (window.confirm('Are you sure you want to delete?')) {

src/index.html

@@ -9,7 +9,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k"></script>
+  <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCpVhQiwAllg1RAFaxMWSpQruuGARy0Y1k&libraries=places"></script>
 </head>
 <body>
   <ngx-app>Loading...</ngx-app>