From 9d576888ca9467aa5b66ed03ca9f12a846116995 Mon Sep 17 00:00:00 2001
From: natlex-to-me <75669064+natlex-to-me@users.noreply.github.com>
Date: Mon, 21 Dec 2020 18:02:03 +0300
Subject: [PATCH] #23 Add Google maps (#27)

---
 src/.gitignore                                |  4 +++
 src/package-lock.json                         | 14 ++++++++
 src/package.json                              |  1 +
 src/src/app/app-routing.module.ts             | 11 +++++-
 src/src/app/app.component.html                |  5 +--
 src/src/app/app.component.ts                  |  6 ----
 src/src/app/app.module.ts                     | 13 +++----
 .../google-map/google-map.component.css       |  7 ++++
 .../google-map/google-map.component.html      |  3 ++
 .../google-map/google-map.component.ts        | 35 +++++++++++++++++++
 src/src/app/main/main.component.css           |  9 +++++
 src/src/app/main/main.component.html          | 10 +++++-
 src/src/app/main/main.component.ts            |  8 ++++-
 src/src/app/main/main.lazy-loaded.module.ts   | 23 ++++++++++++
 src/src/app/main/main.routes.ts               | 10 ++++++
 src/src/app/main/maps.module.ts               | 23 ++++++++++++
 src/src/app/main/models/google-map-config.ts  |  3 ++
 .../services/google-map-config.service.ts     |  7 ++++
 .../google-map-script-loader.service.ts       | 18 ++++++++++
 src/src/environments/environment.prod.ts      |  3 --
 src/src/environments/environment.sample.ts    |  4 +++
 src/src/environments/environment.ts           | 16 ---------
 22 files changed, 195 insertions(+), 38 deletions(-)
 create mode 100644 src/src/app/main/components/google-map/google-map.component.css
 create mode 100644 src/src/app/main/components/google-map/google-map.component.html
 create mode 100644 src/src/app/main/components/google-map/google-map.component.ts
 create mode 100644 src/src/app/main/main.lazy-loaded.module.ts
 create mode 100644 src/src/app/main/main.routes.ts
 create mode 100644 src/src/app/main/maps.module.ts
 create mode 100644 src/src/app/main/models/google-map-config.ts
 create mode 100644 src/src/app/main/services/google-map-config.service.ts
 create mode 100644 src/src/app/main/services/google-map-script-loader.service.ts
 delete mode 100644 src/src/environments/environment.prod.ts
 create mode 100644 src/src/environments/environment.sample.ts
 delete mode 100644 src/src/environments/environment.ts

diff --git a/src/.gitignore b/src/.gitignore
index 86d943a..f0f51d2 100644
--- a/src/.gitignore
+++ b/src/.gitignore
@@ -44,3 +44,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Environment
+/src/environments/environment.ts
+/src/environments/environment.prod.ts
diff --git a/src/package-lock.json b/src/package-lock.json
index bb4d7ed..3a18bde 100644
--- a/src/package-lock.json
+++ b/src/package-lock.json
@@ -561,6 +561,15 @@
         }
       }
     },
+    "@angular/google-maps": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/@angular/google-maps/-/google-maps-11.0.3.tgz",
+      "integrity": "sha512-noSDVk3p+yl0E1H4r6dqoDRMBvw25Wzx+Q+u4dUF5HS8gJ/IIlerif4t0VK6jxBNzAyjBFN9Nqt8sxcb3dOyTw==",
+      "requires": {
+        "@types/googlemaps": "^3.39.3",
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/platform-browser": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-11.0.2.tgz",
@@ -1873,6 +1882,11 @@
         "@types/node": "*"
       }
     },
+    "@types/googlemaps": {
+      "version": "3.40.5",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.40.5.tgz",
+      "integrity": "sha512-xYqO51dgJsZ+xgNUzYHW4zy/jII2RE0HU87bqMgggkp3nCGw/w7MYoQrUKyxIf0022XQ+iQwDua39wM30MG4MA=="
+    },
     "@types/jasmine": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.6.2.tgz",
diff --git a/src/package.json b/src/package.json
index 024d2b9..7a6e179 100644
--- a/src/package.json
+++ b/src/package.json
@@ -17,6 +17,7 @@
     "@angular/compiler": "~11.0.1",
     "@angular/core": "~11.0.1",
     "@angular/forms": "~11.0.1",
+    "@angular/google-maps": "^11.0.3",
     "@angular/platform-browser": "~11.0.1",
     "@angular/platform-browser-dynamic": "~11.0.1",
     "@angular/router": "~11.0.1",
diff --git a/src/src/app/app-routing.module.ts b/src/src/app/app-routing.module.ts
index d425c6f..f9f23af 100644
--- a/src/src/app/app-routing.module.ts
+++ b/src/src/app/app-routing.module.ts
@@ -1,7 +1,16 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    loadChildren: () =>
+      import('./main/main.lazy-loaded.module').then(
+        (m) => m.MainLazyLoadedModule
+      ),
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/src/app/app.component.html b/src/src/app/app.component.html
index aefacef..0f957d5 100644
--- a/src/src/app/app.component.html
+++ b/src/src/app/app.component.html
@@ -4,10 +4,7 @@
   </header>
 
   <main>
-    <app-main>main</app-main>
-    <app-date-slider
-      (onSliderChange)="outputSliderRange($event)"
-    ></app-date-slider>
+    <router-outlet></router-outlet>
   </main>
 
   <aside class="sidebar">
diff --git a/src/src/app/app.component.ts b/src/src/app/app.component.ts
index f0c93cb..6ba247f 100644
--- a/src/src/app/app.component.ts
+++ b/src/src/app/app.component.ts
@@ -1,5 +1,4 @@
 import { Component } from '@angular/core'
-import { ISlider } from './date-slider/slider'
 
 @Component({
   selector: 'app-root',
@@ -8,9 +7,4 @@ import { ISlider } from './date-slider/slider'
 })
 export class AppComponent {
   title = 'City-past';
-
-  outputSliderRange (range: ISlider): void {
-    const datesRange = `Start: ${range.startDate.getFullYear()} End: ${range.endDate.getFullYear()}`
-    console.log(datesRange)
-  }
 }
diff --git a/src/src/app/app.module.ts b/src/src/app/app.module.ts
index 19cd8cf..f585398 100644
--- a/src/src/app/app.module.ts
+++ b/src/src/app/app.module.ts
@@ -1,29 +1,30 @@
 import { AppComponent } from './app.component'
 import { AppRoutingModule } from './app-routing.module'
 import { BrowserModule } from '@angular/platform-browser'
-import { DateSliderComponent } from './date-slider/date-slider.component'
 import { NgModule } from '@angular/core'
-import { NgxSliderModule } from '@angular-slider/ngx-slider'
 import { HeaderPanelComponent } from './header-panel/header-panel.component'
 import { FooterComponent } from './footer/footer.component'
-import { MainComponent } from './main/main.component'
 import { RightSidebarComponent } from './right-sidebar/right-sidebar.component'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 
+import { environment } from '../environments/environment';
+import { MapsModule } from './main/maps.module';
+import { GoogleMapConfig } from './main/models/google-map-config';
+
 @NgModule({
   declarations: [
     AppComponent,
     HeaderPanelComponent,
     FooterComponent,
-    MainComponent,
     RightSidebarComponent,
-    DateSliderComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     BrowserAnimationsModule,
-    NgxSliderModule
+    MapsModule.forRoot(<GoogleMapConfig>{
+      googleMapApiKey: environment.googleMapApiKey,
+    }),
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/src/app/main/components/google-map/google-map.component.css b/src/src/app/main/components/google-map/google-map.component.css
new file mode 100644
index 0000000..28a9c99
--- /dev/null
+++ b/src/src/app/main/components/google-map/google-map.component.css
@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+.map {
+  display: contents;
+}
diff --git a/src/src/app/main/components/google-map/google-map.component.html b/src/src/app/main/components/google-map/google-map.component.html
new file mode 100644
index 0000000..2bb44de
--- /dev/null
+++ b/src/src/app/main/components/google-map/google-map.component.html
@@ -0,0 +1,3 @@
+<ng-container *ngIf="loaded$ | async">
+  <google-map class="map" height="100%" width="100%"></google-map>
+</ng-container>
diff --git a/src/src/app/main/components/google-map/google-map.component.ts b/src/src/app/main/components/google-map/google-map.component.ts
new file mode 100644
index 0000000..62f7a24
--- /dev/null
+++ b/src/src/app/main/components/google-map/google-map.component.ts
@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  OnInit,
+} from '@angular/core';
+import { of } from 'rxjs';
+
+import { GoogleMapConfig } from '../../models/google-map-config';
+import { GoogleMapConfigService } from '../../services/google-map-config.service';
+import { GoogleMapScriptLoaderService } from '../../services/google-map-script-loader.service';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-google-map',
+  templateUrl: './google-map.component.html',
+  styleUrls: ['./google-map.component.css'],
+})
+export class GoogleMapComponent implements OnInit {
+  loaded$ = of(false);
+
+  constructor(
+    @Inject(GoogleMapConfigService)
+    private readonly _config: GoogleMapConfig,
+    private readonly _loader: GoogleMapScriptLoaderService
+  ) {}
+
+  ngOnInit() {
+    const url =
+      'https://maps.googleapis.com/maps/api/js' +
+      `?key=${this._config.googleMapApiKey}`;
+
+    this.loaded$ = this._loader.loadScript(url);
+  }
+}
diff --git a/src/src/app/main/main.component.css b/src/src/app/main/main.component.css
index e69de29..b12f69a 100644
--- a/src/src/app/main/main.component.css
+++ b/src/src/app/main/main.component.css
@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
diff --git a/src/src/app/main/main.component.html b/src/src/app/main/main.component.html
index 17c1228..ea478e3 100644
--- a/src/src/app/main/main.component.html
+++ b/src/src/app/main/main.component.html
@@ -1 +1,9 @@
-<p>main works!</p>
+<div class="content">
+  <p>main works!</p>
+
+  <app-google-map></app-google-map>
+
+  <app-date-slider
+    (onSliderChange)="outputSliderRange($event)"
+  ></app-date-slider>
+</div>
diff --git a/src/src/app/main/main.component.ts b/src/src/app/main/main.component.ts
index b30803a..fc9d1f3 100644
--- a/src/src/app/main/main.component.ts
+++ b/src/src/app/main/main.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { ISlider } from '../date-slider/slider';
+
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
@@ -7,4 +9,8 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainComponent {
-}
\ No newline at end of file
+  outputSliderRange(range: ISlider): void {
+    const datesRange = `Start: ${range.startDate.getFullYear()} End: ${range.endDate.getFullYear()}`;
+    console.log(datesRange);
+  }
+}
diff --git a/src/src/app/main/main.lazy-loaded.module.ts b/src/src/app/main/main.lazy-loaded.module.ts
new file mode 100644
index 0000000..06e2018
--- /dev/null
+++ b/src/src/app/main/main.lazy-loaded.module.ts
@@ -0,0 +1,23 @@
+import { NgxSliderModule } from '@angular-slider/ngx-slider';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { GoogleMapsModule } from '@angular/google-maps';
+import { RouterModule } from '@angular/router';
+
+import { DateSliderComponent } from '../date-slider/date-slider.component';
+import { GoogleMapComponent } from './components/google-map/google-map.component';
+import { MainComponent } from './main.component';
+import { routes } from './main.routes';
+import { MapsModule } from './maps.module';
+
+@NgModule({
+  declarations: [MainComponent, DateSliderComponent, GoogleMapComponent],
+  imports: [
+    CommonModule,
+    GoogleMapsModule,
+    RouterModule.forChild(routes),
+    NgxSliderModule,
+    MapsModule,
+  ],
+})
+export class MainLazyLoadedModule {}
diff --git a/src/src/app/main/main.routes.ts b/src/src/app/main/main.routes.ts
new file mode 100644
index 0000000..cadf71a
--- /dev/null
+++ b/src/src/app/main/main.routes.ts
@@ -0,0 +1,10 @@
+import { Routes } from '@angular/router';
+
+import { MainComponent } from './main.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: MainComponent,
+  },
+];
diff --git a/src/src/app/main/maps.module.ts b/src/src/app/main/maps.module.ts
new file mode 100644
index 0000000..e40c4f3
--- /dev/null
+++ b/src/src/app/main/maps.module.ts
@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { GoogleMapConfig } from './models/google-map-config';
+import { GoogleMapConfigService } from './services/google-map-config.service';
+
+@NgModule({
+  imports: [CommonModule, HttpClientModule, HttpClientJsonpModule],
+})
+export class MapsModule {
+  static forRoot(config: GoogleMapConfig): ModuleWithProviders<MapsModule> {
+    return {
+      ngModule: MapsModule,
+      providers: [
+        {
+          provide: GoogleMapConfigService,
+          useValue: config,
+        },
+      ],
+    };
+  }
+}
diff --git a/src/src/app/main/models/google-map-config.ts b/src/src/app/main/models/google-map-config.ts
new file mode 100644
index 0000000..0198ed2
--- /dev/null
+++ b/src/src/app/main/models/google-map-config.ts
@@ -0,0 +1,3 @@
+export interface GoogleMapConfig {
+  googleMapApiKey: string;
+}
diff --git a/src/src/app/main/services/google-map-config.service.ts b/src/src/app/main/services/google-map-config.service.ts
new file mode 100644
index 0000000..da15d0f
--- /dev/null
+++ b/src/src/app/main/services/google-map-config.service.ts
@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { GoogleMapConfig } from '../models/google-map-config';
+
+export const GoogleMapConfigService = new InjectionToken<GoogleMapConfig>(
+  'GoogleMapConfig'
+);
diff --git a/src/src/app/main/services/google-map-script-loader.service.ts b/src/src/app/main/services/google-map-script-loader.service.ts
new file mode 100644
index 0000000..fae9d3b
--- /dev/null
+++ b/src/src/app/main/services/google-map-script-loader.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GoogleMapScriptLoaderService {
+  constructor(private readonly _httpClient: HttpClient) {}
+
+  loadScript(url: string): Observable<boolean> {
+    return this._httpClient.jsonp(url, 'callback').pipe(
+      map(() => true),
+      catchError(() => of(false))
+    );
+  }
+}
diff --git a/src/src/environments/environment.prod.ts b/src/src/environments/environment.prod.ts
deleted file mode 100644
index 3612073..0000000
--- a/src/src/environments/environment.prod.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export const environment = {
-  production: true
-};
diff --git a/src/src/environments/environment.sample.ts b/src/src/environments/environment.sample.ts
new file mode 100644
index 0000000..5945f50
--- /dev/null
+++ b/src/src/environments/environment.sample.ts
@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  googleMapApiKey: 'google-map-api-key', // Google Map API Key
+};
diff --git a/src/src/environments/environment.ts b/src/src/environments/environment.ts
deleted file mode 100644
index 7b4f817..0000000
--- a/src/src/environments/environment.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-// This file can be replaced during build by using the `fileReplacements` array.
-// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
-// The list of file replacements can be found in `angular.json`.
-
-export const environment = {
-  production: false
-};
-
-/*
- * For easier debugging in development mode, you can import the following file
- * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
- *
- * This import should be commented out in production mode because it will have a negative impact
- * on performance if an error is thrown.
- */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.