Added better distance measuring

src/app/models/map.ts

@@ -0,0 +1,3 @@
+export interface Map {
+    name: string
+}

src/app/models/marker.ts

@@ -0,0 +1,8 @@
+export class Marker {
+    latitude: number;
+    longitude: number;
+    name: string;
+    color: string;
+    notes: string;
+    icon: string;
+}

src/app/views/map/map.component.ts

@@ -113,26 +113,25 @@ export class MapComponent {
 
                 let distance = distanceInM(first.lat, first.lng, coords.lat, coords.lng);
 
-                let marker = new google.maps.Marker({
+                let info = new google.maps.InfoWindow({
-                    map: this.mapApi,
+                    content: distance >= 1000 ? `${Math.round(distance / 100) / 10} km` : `${Math.round(distance)} m`,
-                    icon: null,
+                    position: {lat: (first.lat + coords.lat) / 2, lng: (first.lng + coords.lng) / 2}
-                    position: {lat: (first.lat + coords.lat) / 2, lng: (first.lng + coords.lng) / 2},
-                    label: distance >= 1000 ? `${Math.round(distance / 100) / 10} km` : `${Math.round(distance)} m`
                 });
+                info.open(this.mapApi);
 
                 google.maps.event.addListener(line, 'click', () => {
                     if(this.menu[1][3].enabled) {
                         line.setMap(null);
-                        marker.setMap(null);
+                        info.setMap(null);
                     }
-                })
+                });
 
-                google.maps.event.addListener(marker, 'click', () => {
+                google.maps.event.addListener(info, 'click', () => {
                     if(this.menu[1][3].enabled) {
                         line.setMap(null);
-                        marker.setMap(null);
+                        info.setMap(null);
                     }
-                })
+                });
             }
         })
     }

src/styles.scss

@@ -16,15 +16,22 @@ body {
 }
 
 // Remove google maps branding
-a[href^="http://maps.google.com/maps"]{display:none !important}
+agm-map {
-a[href^="https://maps.google.com/maps"]{display:none !important}
+  a[href^="http://maps.google.com/maps"]{display:none !important}
+  a[href^="https://maps.google.com/maps"]{display:none !important}
 
-.gmnoprint a, .gmnoprint span, .gm-style-cc {
+  .gmnoprint a, .gmnoprint span, .gm-style-cc {
-  display:none;
+    display: none;
-}
+  }
 
-.gmnoprint div {
+  .gmnoprint div {
-  background:none !important;
+    background: none !important;
+
+  }
+
+  button[title="Close"] {
+    display: none !important;
+  }
 }
 
 .mat-padding-0 {