#23 Add Google maps (#27)

src/.gitignore

@@ -44,3 +44,7 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Environment
+/src/environments/environment.ts
+/src/environments/environment.prod.ts

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",

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)],

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">

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)
-  }
 }

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]

src/src/app/main/components/google-map/google-map.component.css

@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+.map {
+  display: contents;
+}

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>

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);
+  }
+}

src/src/app/main/main.component.css

@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

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>

src/src/app/main/main.component.ts

@@ -1,10 +1,16 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { ISlider } from '../date-slider/slider';
+
 @Component({
   selector: 'app-main',
   templateUrl: './main.component.html',
   styleUrls: ['./main.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MainComponent {
-}
+  outputSliderRange(range: ISlider): void {
+    const datesRange = `Start: ${range.startDate.getFullYear()} End: ${range.endDate.getFullYear()}`;
+    console.log(datesRange);
+  }
+}

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 {}

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,
+  },
+];

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,
+        },
+      ],
+    };
+  }
+}

src/src/app/main/models/google-map-config.ts

@@ -0,0 +1,3 @@
+export interface GoogleMapConfig {
+  googleMapApiKey: string;
+}

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'
+);

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))
+    );
+  }
+}

src/src/environments/environment.sample.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  googleMapApiKey: 'google-map-api-key', // Google Map API Key
+};