feat: Add Google Map for testing purposes

package-lock.json

@@ -1569,6 +1569,39 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
       "integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ=="
     },
+    "@google/maps": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@google/maps/-/maps-1.0.2.tgz",
+      "integrity": "sha512-iTsvIIgVjIicC+UdLCJOMSBnOmLnmgnOXrjTBUUQr/ffBMfH9GdnlrA9R+vH/kZSFEp9AZUDw0vJ5ES6avfTPQ==",
+      "requires": {
+        "https-proxy-agent": "^3.0.0",
+        "uuid": ">=2.2.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.6",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
+          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "https-proxy-agent": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-3.0.1.tgz",
+          "integrity": "sha512-+ML2Rbh6DAuee7d07tYGEKOEi2voWPUGan+ExdPbPW6Z3svq+JCqr0v8WmKPOkz1vOVykPCBSuobe7G8GJUtVg==",
+          "requires": {
+            "agent-base": "^4.3.0",
+            "debug": "^3.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1716,6 +1749,16 @@
         "@types/node": "*"
       }
     },
+    "@types/google__maps": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@types/google__maps/-/google__maps-0.5.11.tgz",
+      "integrity": "sha512-Se9bGlZ5VVVHmx4F1uwdPUo213cwkoLc2CZMLJ9+gYOCp/4NHe7taGJxK5juCVTxU76ISbT3biugmC3IZme4LQ=="
+    },
+    "@types/googlemaps": {
+      "version": "3.39.0",
+      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.39.0.tgz",
+      "integrity": "sha512-SiD5JrB5wkA2JvkP7Tn3D+L4F50QXtnQI+J6Y/HnDhfyp0vlB6tNz14BuOOXV1rwP2vnTwE1uqNjfaKXCmuHDg=="
+    },
     "@types/jasmine": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.0.tgz",
@@ -2077,7 +2120,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
       "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
-      "dev": true,
       "requires": {
         "es6-promisify": "^5.0.0"
       }
@@ -4922,14 +4964,12 @@
     "es6-promise": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==",
-      "dev": true
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
     },
     "es6-promisify": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
       "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
-      "dev": true,
       "requires": {
         "es6-promise": "^4.0.3"
       }
@@ -13280,8 +13320,7 @@
     "uuid": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
-      "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==",
-      "dev": true
+      "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",

package.json

@@ -28,11 +28,14 @@
     "@angular/platform-browser": "^8.1.0",
     "@angular/platform-browser-dynamic": "^8.1.0",
     "@angular/router": "^8.1.0",
-    "@ngx-translate/core": "^11.0.1",
     "@angular/service-worker": "^8.1.0",
+    "@fortawesome/fontawesome-free": "^5.1.0",
+    "@google/maps": "^1.0.2",
     "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1",
+    "@ngx-translate/core": "^11.0.1",
+    "@types/google__maps": "^0.5.11",
+    "@types/googlemaps": "^3.39.0",
     "bootstrap": "^4.1.1",
-    "@fortawesome/fontawesome-free": "^5.1.0",
     "rxjs": "^6.5.2",
     "zone.js": "^0.9.1"
   },

src/app/about/about.component.html

@@ -3,6 +3,7 @@
     <h1>
       <span translate>APP_NAME</span>
     </h1>
-    <p><i class="far fa-bookmark"></i> <span translate>Version</span> {{ version }}</p>
+    <!-- <p><i class="far fa-bookmark"></i> <span translate>Version</span> {{ version }}</p> -->
+    <div #mapContainer id="map"></div>
   </div>
 </div>

src/app/about/about.component.scss

@@ -0,0 +1,4 @@
+#map {
+  height: 500px;
+  width: 100%;
+}

src/app/about/about.component.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild, ElementRef, OnInit } from '@angular/core';
 
 import { environment } from '@env/environment';
 
+declare var google: any;
+
 @Component({
   selector: 'app-about',
   templateUrl: './about.component.html',
@@ -10,6 +12,33 @@ import { environment } from '@env/environment';
 export class AboutComponent implements OnInit {
   version: string | null = environment.version;
 
+  @ViewChild('mapContainer', { static: false }) gmap: ElementRef;
+  map: google.maps.Map;
+  lat = 40.73061;
+  lng = -73.935242;
+
+  coordinates = new google.maps.LatLng(this.lat, this.lng);
+
+  mapOptions: google.maps.MapOptions = {
+    center: this.coordinates,
+    zoom: 8
+  };
+
+  marker = new google.maps.Marker({
+    position: this.coordinates,
+    map: this.map,
+    title: 'Hello World!'
+  });
+
+  ngAfterViewInit() {
+    this.mapInitializer();
+  }
+
+  mapInitializer() {
+    this.map = new google.maps.Map(this.gmap.nativeElement, this.mapOptions);
+    this.marker.setMap(this.map);
+  }
+
   constructor() {}
 
   ngOnInit() {}

src/index.html

@@ -10,6 +10,11 @@
     <meta name="theme-color" content="#4e8ef7" />
     <link rel="manifest" href="manifest.json" />
 
+    <script
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAy793caOMWvrDnVgvFAYu3lIAWPFiYjv0"
+      type="text/javascript"
+    ></script>
+
     <!-- add to homescreen for ios -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="default" />

tsconfig.json

@@ -11,7 +11,7 @@
     "noImplicitAny": true,
     "suppressImplicitAnyIndexErrors": true,
     "target": "es2015",
-    "typeRoots": ["node_modules/@types"],
+    "types": ["node_modules/@types", "googlemaps"],
     "lib": ["es2018", "dom"],
     "baseUrl": "./",
     "paths": {