#20 Add dummy marker storage service

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

@@ -1,12 +1,20 @@
 <ng-container *ngIf="loaded$ | async">
-  <google-map
-    class="map"
-    (mapClick)="addMarker($event)"
-    height="100%"
-    width="100%"
-  >
-    <ng-container *ngFor="let position of markerPositions">
-      <map-marker [position]="position"></map-marker>
-    </ng-container>
-  </google-map>
+  <ng-container *ngIf="markers$ | async as markers">
+    <google-map
+      class="map"
+      height="100%"
+      (mapClick)="addMarker($event, markers)"
+      [options]="options"
+      width="100%"
+    >
+      <ng-container *ngFor="let marker of markers">
+        <map-marker
+          [position]="{
+            lat: marker.coordinates.latitude,
+            lng: marker.coordinates.longitude
+          }"
+        ></map-marker>
+      </ng-container>
+    </google-map>
+  </ng-container>
 </ng-container>

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

@@ -4,11 +4,15 @@ import {
   Inject,
   OnInit,
 } from '@angular/core';
-import { of } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
+import { tap } from 'rxjs/operators';
 
+import { MapOptions } from '../../constants/map-options';
 import { GoogleMapConfig } from '../../models/google-map-config';
+import { Marker, MarkerCoordinates } from '../../models/marker';
 import { GoogleMapConfigService } from '../../services/google-map-config.service';
 import { GoogleMapScriptLoaderService } from '../../services/google-map-script-loader.service';
+import { MarkerStorageService } from '../../services/marker-storage.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -17,28 +21,65 @@ import { GoogleMapScriptLoaderService } from '../../services/google-map-script-l
   styleUrls: ['./google-map.component.css'],
 })
 export class GoogleMapComponent implements OnInit {
-  loaded$ = of(false);
-  markerPositions: google.maps.LatLng[] = [];
+  loaded$ = new BehaviorSubject<boolean>(false);
+  markers$ = new BehaviorSubject<Marker[]>([]);
+  options = MapOptions;
 
   constructor(
     @Inject(GoogleMapConfigService)
     private readonly _config: GoogleMapConfig,
-    private readonly _loader: GoogleMapScriptLoaderService
+    private readonly _loader: GoogleMapScriptLoaderService,
+    private readonly _markerStorage: MarkerStorageService
   ) {}
 
   ngOnInit() {
-    const url =
-      'https://maps.googleapis.com/maps/api/js' +
-      `?key=${this._config.googleMapApiKey}`;
+    this._loadMap();
 
-    this.loaded$ = this._loader.loadScript(url);
+    this._getMarkers();
   }
 
-  addMarker(evnt: google.maps.MouseEvent) {
-    this.markerPositions.push(evnt.latLng);
+  addMarker(evnt: google.maps.MouseEvent, markers: Marker[]) {
+    this._markerStorage
+      .createMarker()
+      .pipe(
+        tap((result) => {
+          if (!result) return;
+
+          const coordinates = <MarkerCoordinates>{
+            latitude: evnt.latLng.lat(),
+            longitude: evnt.latLng.lng(),
+          };
+
+          this._addMarker(coordinates, markers);
+        })
+      )
+      .subscribe();
+  }
+
+  private _addMarker(coordinates: MarkerCoordinates, markers: Marker[]) {
+    const tempMarkers = markers;
+
+    tempMarkers.push(<Marker>{ coordinates });
+
+    this.markers$.next(tempMarkers);
 
     console.log(
-      `Latitude: ${evnt.latLng.lat()}, Longitude: ${evnt.latLng.lng()}`
+      `Latitude: ${coordinates.latitude}, Longitude: ${coordinates.longitude}`
     );
   }
+
+  private _getMarkers() {
+    this._markerStorage
+      .getAllMarkers()
+      .pipe(tap((markers) => this.markers$.next(markers)))
+      .subscribe();
+  }
+
+  private _loadMap() {
+    const url =
+      'https://maps.googleapis.com/maps/api/js' +
+      `?key=${this._config.googleMapApiKey}`;
+
+    this._loader.loadScript(url).subscribe(() => this.loaded$.next(true));
+  }
 }

src/src/app/main/constants/map-options.ts

@@ -0,0 +1,4 @@
+export const MapOptions: google.maps.MapOptions = {
+  center: { lat: 61.783333, lng: 34.333333 },
+  zoom: 13,
+};

src/src/app/main/models/marker.ts

@@ -0,0 +1,8 @@
+export interface Marker {
+  coordinates: MarkerCoordinates;
+}
+
+export interface MarkerCoordinates {
+  latitude: number;
+  longitude: number;
+}

src/src/app/main/services/marker-storage.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Observable, of } from 'rxjs';
+
+import { Marker } from '../models/marker';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class MarkerStorageService {
+  getAllMarkers(): Observable<Marker[]> {
+    return of([
+      <Marker>{
+        coordinates: {
+          latitude: 61.77625594945171,
+          longitude: 34.30834442808107,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.784380796376816,
+          longitude: 34.3447208404541,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.7900890068273,
+          longitude: 34.37491568247985,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.79136849012713,
+          longitude: 34.3645658348205,
+        },
+      },
+      <Marker>{
+        coordinates: {
+          latitude: 61.79573094898839,
+          longitude: 34.375072717666626,
+        },
+      },
+    ]);
+  }
+
+  createMarker(): Observable<string> {
+    return of('Marker was added successfully');
+  }
+}