From 1644d0c8df89517e8718d17f3a09ce16c690496d Mon Sep 17 00:00:00 2001 From: Konstantinos Kamaropoulos Date: Tue, 7 Jan 2020 00:49:59 +0200 Subject: [PATCH] feat: Add Google Map for testing purposes --- package-lock.json | 51 ++++++++++++++++++++++++++---- package.json | 7 ++-- src/app/about/about.component.html | 3 +- src/app/about/about.component.scss | 4 +++ src/app/about/about.component.ts | 31 +++++++++++++++++- src/index.html | 5 +++ tsconfig.json | 2 +- 7 files changed, 92 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index e385c89..19796c6 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 601f093..e6bf7ef 100644 --- a/package.json +++ b/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" }, diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index 0917ae7..8ed3de8 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -3,6 +3,7 @@

APP_NAME

-

Version {{ version }}

+ +
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index e69de29..8dcf3d7 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -0,0 +1,4 @@ +#map { + height: 500px; + width: 100%; +} diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index beb89a2..bbb1a72 100644 --- a/src/app/about/about.component.ts +++ b/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() {} diff --git a/src/index.html b/src/index.html index 0e240ad..ba2df28 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,11 @@ + + diff --git a/tsconfig.json b/tsconfig.json index 149109c..dea4d42 100644 --- a/tsconfig.json +++ b/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": {