Browse Source

feat: Add Google Map for testing purposes

master
Konstantinos Kamaropoulos 5 years ago
parent
commit
1644d0c8df
  1. 51
      package-lock.json
  2. 7
      package.json
  3. 3
      src/app/about/about.component.html
  4. 4
      src/app/about/about.component.scss
  5. 31
      src/app/about/about.component.ts
  6. 5
      src/index.html
  7. 2
      tsconfig.json

51
package-lock.json

@ -1569,6 +1569,39 @@
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.12.0.tgz",
"integrity": "sha512-vKDJUuE2GAdBERaQWmmtsciAMzjwNrROXA5KTGSZvayAsmuTGjam5z6QNqNPCwDfVljLWuov1nEC3mEQf/n6fQ==" "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": { "@mrmlnc/readdir-enhanced": {
"version": "2.2.1", "version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@ -1716,6 +1749,16 @@
"@types/node": "*" "@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": { "@types/jasmine": {
"version": "3.5.0", "version": "3.5.0",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.0.tgz", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.0.tgz",
@ -2077,7 +2120,6 @@
"version": "4.3.0", "version": "4.3.0",
"resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz", "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-4.3.0.tgz",
"integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==", "integrity": "sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==",
"dev": true,
"requires": { "requires": {
"es6-promisify": "^5.0.0" "es6-promisify": "^5.0.0"
} }
@ -4922,14 +4964,12 @@
"es6-promise": { "es6-promise": {
"version": "4.2.8", "version": "4.2.8",
"resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
"integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==", "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
"dev": true
}, },
"es6-promisify": { "es6-promisify": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz", "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=", "integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
"dev": true,
"requires": { "requires": {
"es6-promise": "^4.0.3" "es6-promise": "^4.0.3"
} }
@ -13280,8 +13320,7 @@
"uuid": { "uuid": {
"version": "3.3.3", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz",
"integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ==", "integrity": "sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ=="
"dev": true
}, },
"validate-npm-package-license": { "validate-npm-package-license": {
"version": "3.0.4", "version": "3.0.4",

7
package.json

@ -28,11 +28,14 @@
"@angular/platform-browser": "^8.1.0", "@angular/platform-browser": "^8.1.0",
"@angular/platform-browser-dynamic": "^8.1.0", "@angular/platform-browser-dynamic": "^8.1.0",
"@angular/router": "^8.1.0", "@angular/router": "^8.1.0",
"@ngx-translate/core": "^11.0.1",
"@angular/service-worker": "^8.1.0", "@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", "@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", "bootstrap": "^4.1.1",
"@fortawesome/fontawesome-free": "^5.1.0",
"rxjs": "^6.5.2", "rxjs": "^6.5.2",
"zone.js": "^0.9.1" "zone.js": "^0.9.1"
}, },

3
src/app/about/about.component.html

@ -3,6 +3,7 @@
<h1> <h1>
<span translate>APP_NAME</span> <span translate>APP_NAME</span>
</h1> </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>
</div> </div>

4
src/app/about/about.component.scss

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

31
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'; import { environment } from '@env/environment';
declare var google: any;
@Component({ @Component({
selector: 'app-about', selector: 'app-about',
templateUrl: './about.component.html', templateUrl: './about.component.html',
@ -10,6 +12,33 @@ import { environment } from '@env/environment';
export class AboutComponent implements OnInit { export class AboutComponent implements OnInit {
version: string | null = environment.version; 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() {} constructor() {}
ngOnInit() {} ngOnInit() {}

5
src/index.html

@ -10,6 +10,11 @@
<meta name="theme-color" content="#4e8ef7" /> <meta name="theme-color" content="#4e8ef7" />
<link rel="manifest" href="manifest.json" /> <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 --> <!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />

2
tsconfig.json

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

Loading…
Cancel
Save