Can anyone assist me with retrieving coordinates from a click event on a map?
Here is the desired result: Link
Below is the code I have so far:
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<Object>
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) {
//-------------- Unable to retrieve map coordinates -------------
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));
}
}
HTML component:
<div id="map" style="width:100%;height:600px" (click)="placeMarker($event)">
</div>
I am struggling to obtain the map coordinates. The ones in the placeMarker function are just client coordinates and not integrated with Maps. I came across this but it seems like a big project and I prefer not to rely on it. Any help would be greatly appreciated :)
Cheers