#13 Add marker on map click (#30)

natlex · Dec 21, 2020 · b84e3be · b84e3be
1 parent 9d57688
commit b84e3be
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/src/app/main/components/google-map/google-map.component.html b/src/src/app/main/components/google-map/google-map.component.html
@@ -1,3 +1,12 @@
 <ng-container *ngIf="loaded$ | async">
-  <google-map class="map" height="100%" width="100%"></google-map>
+  <google-map
+    class="map"
+    (mapClick)="addMarker($event)"
+    height="100%"
+    width="100%"
+  >
+    <ng-container *ngFor="let position of markerPositions">
+      <map-marker [position]="position"></map-marker>
+    </ng-container>
+  </google-map>
 </ng-container>
diff --git a/src/src/app/main/components/google-map/google-map.component.ts b/src/src/app/main/components/google-map/google-map.component.ts
@@ -18,6 +18,7 @@ import { GoogleMapScriptLoaderService } from '../../services/google-map-script-l
 })
 export class GoogleMapComponent implements OnInit {
   loaded$ = of(false);
+  markerPositions: google.maps.LatLng[] = [];
 
   constructor(
     @Inject(GoogleMapConfigService)
@@ -32,4 +33,12 @@ export class GoogleMapComponent implements OnInit {
 
     this.loaded$ = this._loader.loadScript(url);
   }
+
+  addMarker(evnt: google.maps.MouseEvent) {
+    this.markerPositions.push(evnt.latLng);
+
+    console.log(
+      `Latitude: ${evnt.latLng.lat()}, Longitude: ${evnt.latLng.lng()}`
+    );
+  }
 }