Example on event onClick implementation

[Michael-fore]

I have a mini app where a user click the map and a pin is replaced. I recently move off another library to this one but can't figure out how to get the coordinates from the click event.

`
const onClick = ({
e
}: {
e:any
}) => {
//create markers
}

<GoogleMap
apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY }
defaultCenter={defaultProps.center}
defaultZoom={defaultProps.zoom}
events={[{ name: 'onClick', handler:(e)=>{onClick(e)}}]}
>
{markers}
`

[giorgiabosello]

Hi @Michael-fore. You have the coordinates on the Marker child, not the map.
To see the current position of the map, you have the ref.
Check the example in the source code.

[giorgiabosello]

@Michael-fore sorry, didn't got your ask.
Yeah, your implementation is right. I don't remember if you can do what you want to do. Check if, with the onClick, you have something you can use on the map ref (since the onClick is passed down to the wrapper DIV and not the map itself), otherwise, I'll give it a check by the end of the day.

[giorgiabosello]

@Michael-fore I got it working by using the function that converts pixel to LatLng, but it seems to be not precise.

const getProjection = (map, clientX, clientY) => {
	try {
		var overlay = new window.google.maps.OverlayView()
		overlay.setMap(map)
		var LatLng = overlay.getProjection().fromContainerPixelToLatLng(new window.google.maps.Point(x, y))
		overlay.setMap(null)
		return {
			lat: LatLng.lat(),
			lng: LatLng.lng(),
		}
	} catch (e) {
		console.error(e)
		return { lat: 0, lng: 0 }
	}
}

<GoogleMap
	apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}
	defaultCenter={defaultProps.center}
	defaultZoom={defaultProps.zoom}
	events={[
		{
			name: 'onClick',
			handler: (e) => {
				// you have the `map` object `onGoogleApiLoaded` callback
				const projection = getProjection(map, e.clientX, e.clientY)
				console.log(projection)
			},
		},
	]}
>
	{markers}
</GoogleMap>

Try working on this.

[Michael-fore]

Ah sweet, I know had to add the Mercator projection compensation.

in e.view.google.maps.event there is a LatLng function provided by google for the click event. But i couldn't figure out how to construct it. I'll post my working code when i have it up and running

[Michael-fore]

I ended up just doing this as a work around

const onGoogleApiLoaded = ({ map, maps }) => { mapRef.current = map setMapReady(true) window.google.maps.event.addDomListener(mapRef.current, "click", (e) => { console.log(e.latLng.lat(),e.latLng.lng()) }) }

[giorgiabosello]

@Michael-fore seems to be a good way of doing this, not invasive :)

[Michael-fore]

Thanks for you help!