added google map view with markers of the avialable images;

frontend/src/app/app.module.ts

@@ -20,6 +20,7 @@ import {MatTableModule} from '@angular/material/table';
 import {MatTabsModule} from '@angular/material/tabs';
 import { ImagesComponent } from './component/images/images.component';
 import { MapComponent } from './component/map/map.component';
+import {AgmCoreModule} from '@agm/core';
 
 @NgModule({
   declarations: [LandingComponent, ImagesComponent, MapComponent],
@@ -40,6 +41,14 @@ import { MapComponent } from './component/map/map.component';
         MatPaginatorModule,
         MatTableModule,
         MatTabsModule,
+        // GoogleMapsModule,
+        AgmCoreModule.forRoot({
+          apiKey: 'AIzaSyBDgLJ1sL48IQg7e5jrwmUyXkqeEfVnf78'
+          /* apiKey is required, unless you are a
+          premium customer, in which case you can
+          use clientId
+          */
+        })
 
     ],
   // enables injecting

frontend/src/app/component/map/map.component.css

@@ -0,0 +1 @@
+agm-map { height: 50vh; /* height is required */ }

frontend/src/app/component/map/map.component.html

@@ -1 +1,19 @@
-<h2>Image Locations</h2>
+<h2>Map</h2>
+
+<agm-map *ngIf="images"
+  [latitude]="latitude"
+  [longitude]="longitude"
+  [zoom]="2">
+  <agm-marker
+    *ngFor="let image of images"
+    [latitude]="image.latitude"
+    [longitude]="image.longitude"
+    [opacity]="1"
+    [markerDraggable]="true"
+    (markerClick)="selectMarker($event)"
+  ></agm-marker>
+</agm-map>
+
+<p *ngIf="selectedImage">
+  Latitude: {{ selectedImage.latitude }} Longitude: {{ selectedImage.longitude }} Name: {{selectedImage.name}}
+</p>

frontend/src/app/component/map/map.component.ts

@@ -1,6 +1,7 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {ImageMetadata} from '../../interfaces/interface';
 
+// @ts-ignore
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
@@ -11,10 +12,19 @@ export class MapComponent implements OnInit {
   @Input()
   images: ImageMetadata[];
 
+  selectedImage: ImageMetadata;
+  latitude = 43.879078;
+  longitude = -103.4615581;
+
   constructor() {
+
   }
 
-  ngOnInit(): void {
+  ngOnInit() {
+
   }
 
+  selectMarker(event) {
+    this.selectedImage = this.images.find(image => image.latitude === event.latitude && image.longitude === event.longitude);
+  }
 }