title: Angular5 and Google Maps v3 Api - Getting coordinations from map "click" event
body: <p>I'm trying to get coordinations from click event on map</p>
  
  <p>Heres the result im trying to get: <a href="https://www.w3schools.com/graphics/tryit.asp?filename=trymap_events_infowindow2" rel="nofollow noreferrer">Here</a></p>
  
  <p>As far here is my code:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ViewChild } from '@angular/core';
  import { } from '@types/googlemaps';
  import { map } from 'rxjs/operator/map';
  import { Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-google-map',
    templateUrl: './google-map.component.html',
    styleUrls: ['./google-map.component.css']
  })
  export class GoogleMapComponent implements OnInit {
    constructor() { }
  
    markers: Array&lt;Object&gt;
    myLatLng = { lat: 53.131083, lng: 23.154742 };
    latitude: 53.131083;
    longitute: 23.154742;
    googleMap: google.maps.Map;
  
    ngOnInit() {
      var mapCanvas = document.getElementById("map");
      var myCenter = new google.maps.LatLng(53.131083, 23.154742);
      var mapOptions = {
        center: myCenter,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      this.googleMap = new google.maps.Map(mapCanvas, mapOptions);
      google.maps.event.addListener(map, 'click', function (event) {
        this.placeMarker(event);
      });
    }
  
    placeMarker(event) {
  
      //-------------- i can't get map coords -------------
      var eventLatLng = { lat: event.clientX, lng: event.clientY };
      console.log(eventLatLng);
      var marker = new google.maps.Marker({
        position: this.myLatLng,
        map: this.googleMap
      });
  
      var infowindow = new google.maps.InfoWindow({
        content: 'Marker Location:' + marker.getPosition()
      });
  
      infowindow.open(this.googleMap, marker);
    }
  
    addBicycleLayer() {
      var bikeLayer = new google.maps.BicyclingLayer();
      bikeLayer.setMap(this.googleMap);
    }
  
    setMapType(mapTypeId: string) {
      this.googleMap.setMapTypeId(mapTypeId)
    }
  
  
    setCenter(e: any) {
      e.preventDefault();
      this.googleMap.setCenter(new google.maps.LatLng(this.latitude, this.longitute));
    }
  }
  </code></pre>
  
  <p>HTML component:</p>
  
  <pre><code>&lt;div id="map" style="width:100%;height:600px" (click)="placeMarker($event)"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't know how to get to the map coordinations. These coords that are in placeMarker function are just client coords ( not integrated with Maps )
  I found some <a href="https://angular-maps.com/" rel="nofollow noreferrer">https://angular-maps.com/</a> but it will be a large project and i don't want to rely on this.
  I will be grateful for any help :)</p>
  
  <p>Cheers</p>