get lat-lng click on the map

[Akifcan]

hello, how can i do when clicked map get a lng lat coorditanes?

i tried this way

> <script type="text/javascript">
> 	import {gmapApi} from 'vue2-google-maps'
> 
> 
> 	export default{
> 		data(){
> 			return{
> 				markers:[
> 				{
> 					position: {lat: 10, lng: 10},
> 				},
> 				{
> 					position: {lat: 50, lng: 10},
> 				}
> 				]
> 			}
> 		},
> 		methods: {
> 			mark(){
> 				console.log(this.google)
> 			}
> 		},
> 		computed: {
> 			google: gmapApi
> 		}
> 	}
> </script>

<template>
	<q-page padding>
		
		<GmapMap
		id='map'
		:center="{lat:10, lng:10}"
		:zoom="7"
		map-type-id="terrain"
		style="width: 100%; height: 500px"
		@click='mark()'
		>
		<GmapMarker
		v-for='marker in markers'
		:position="marker.position"
		:clickable="true"
		:draggable="true"
		/>

	</GmapMap>		


</q-page>
</template>

and return this values

LatLng: ƒ (a,b,c)
arguments: null
caller: null
length: 3
name: ""
prototype: {toString: ƒ, toJSON: ƒ, equals: ƒ, toUrlValue: ƒ, constructor: ƒ}
__proto__: ƒ ()
[[FunctionLocation]]: js?key=AIzaSyD8k4GDb…ueGoogleMapsInit:69
[[Scopes]]: Scopes[2]

but dont write any info lat lng

[gazben]

@Akifcan You can get the coordinates by calling the lat() and lng() functions like this:

           mark(event) {
               console.log(event.latLng.lat())
               console.log(event.latLng.lng())
           }

[Tobenna-KA]

console.log(event.latLng.lat()) console.log(event.latLng.lng())

This works perfectly if

<GmapMap
   // ...
 @click="mark"
/>

//...
methods: {

  mark(event) {
    console.log(event.latLng.lat())
     console.log(event.latLng.lng())
  }
}

[meharwaheed]

the function event.latLng.lat() is work only if function is called by clicking on marker not map

[modavidc]

Cool! @gazben. You're the best.

Thanks a lot. ❤

[modavidc]

@meharwaheed it's not true. Maybe you had a bad try.

It worked perfect for me the first time.

[choubey1]

Is there any way to show the coordinates, without defining @click in GmapMap?

[choubey1]

@gazben

[gazben]

I don't think so. Without the @click what coordinates do you wnat to query?

[choubey1]

I want to show lat and lng but I don't want to put @click in GmapMap

[orlando-mm]

Using the bounds_changed event, I can see these results in the console. I hope it can be useful in some cases.

// vue2-google-maps in Nuxt 2.15.3

<gmap-map //.... @bounds_changed="setCoordinates" @dragend="coordinates" //dragend >

data() { return { coordinatesMap: null, } }, methods: { setCoordinates(newCoordinates) { this.coordinatesMap = newCoordinates }, coordinates() { //Do something console.log(this.coordinatesMap.Ab) console.log(this.coordinatesMap.Ua) }, }

// Console { "h": 47.371524727114014, "j": 47.395845736123185 } { "h": -1.2169070898230872, "j": -1.183604782694181 } /***** I think it is associated with *****/ { "south": 47.371524727114014, "west": -1.2169070898230872, "north": 47.395845736123185, "east": -1.183604782694181 }