LarsBergqvist

import { Injectable } from '@angular/core';
import * as loadGoogleMapsApi from 'load-google-maps-api';

@Injectable()
class GoogleMapsService {
    constructor() { }
    load(googleAPIKey: string): any {
        return loadGoogleMapsApi({ key: googleAPIKey });
    }
}

LarsBergqvist

        {
            provide: HTTP_INTERCEPTORS,
            useClass: HttpInterceptorService,
            multi: true,
            deps: [MessageBrokerService, LoggingService]
        },

LarsBergqvist

import { HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ErrorOccurredMessage } from '../messages/error-occurred.message';
import { MessageBrokerService } from './message-broker.service';
import { LoggingService } from './logging-service';

@Injectable({
    providedIn: 'root'

LarsBergqvist

export function locationsServiceFactory() {
    return (http: HttpClient, configService: AppConfigService, logging: LoggingService): LocationsService => {
        if (configService.useFakeData) {
            logging.logInfo('use mock service');
            return new LocationsServiceMock();
        } else {
            logging.logInfo('use real service');
            return new LocationsServiceImpl(http, configService);
        }
    };

LarsBergqvist

import { Component, Input, OnInit } from '@angular/core';
import { Location } from '../models/location';
import { AppConfigService } from '../services/app-config.service';
import { MessageBrokerService } from '../services/message-broker.service';
import { NewMarkerFromMapMessage } from '../messages/new-marker-from-map.message';

declare var google: any;

@Component({
    selector: 'app-map',

LarsBergqvist

<div *ngIf="useMap">
    <p-gmap *ngIf="options.center" [options]="options" [overlays]="overlays" [style]="{'width':'100%','height':'320px'}"
        (onMapReady)="onMapReady($event)" (onMapClick)="handleMapClick($event)"></p-gmap>
</div>

LarsBergqvist

export function appConfigInit(configService: AppConfigService,
                              googleMapService: GoogleMapsService, logging: LoggingService) {
    // Load the configuration and init google api if maps should be used
    return () => {
        return new Promise((resolve) => {
            configService.load().then(() => {
                if (configService.useMap) {
                    logging.logInfo('Use map');
                    googleMapService.load(configService.googleAPIKey).then(() => {
                        resolve();

LarsBergqvist

{
  "apiUrl": "https://localhost",
  "apiPort": "5001",
  "useFakeData": true,
  "useMap": true,
  "googleAPIKey": "ABzaDuAQbFxSalDaWfIAB7DEZAh730AFGGGlpg"
}

LarsBergqvist

    async ngOnInit() {
        const messages = this.messageBroker.getMessage();
        messages.pipe(filter(message => message instanceof AddNewLocationMessage))
            .subscribe((message: AddNewLocationMessage) => {
                if (message) {
                    this.createDefaultLocation();
                    this.editMode = LocationEditMode.AddNew;
                    this.isVisible = true;
                    this.setCurrentPosition();
                }

LarsBergqvist

{
  "apiUrl": "https://localhost",
  "apiPort": "5001",
  "useFakeData": true,
  "useMap": false,
  "googleAPIKey": "YOUR-API-KEY"
}