onClick event doesn't work on Map component

[alex-roc]

When I tried to get the coordinates with a onClick event in the map it doesn't show nothing. How to obtain the coordinates?

For example, this doesn't work:

 <Map
        onClick={(event) => { console.log(event) }}
        style={{ width: '400px', height: '400px' }}
        zoom={5}
        center={{
            lat: -17.146,
            lng: -65.841
        }}
    >
        <Marker position={{ lat: values.ubicacion.lat, lng: values.ubicacion.lng }} />
</Map>

[usefulthink]

Yeah, that is something I still have to add to the map-component. We'll add support for all map-events soon...

[jabranr]

Hi, I started to look into this so I have created a PR that addresses this missing feature. #52

[testboui]

I liked this library very much and I would like to use it. But this issue is preventing me from doing so. Can you please provide a temporary workaround for implementing onClick. Thanks.

[ByteCrak07]

This is what I did as of right now to implement onClick

import { useEffect, useState } from 'react'
import { APIProvider, Map, Marker, useMap, useMapsLibrary } from '@vis.gl/react-google-maps';

type Position = {
  lat: number;
  lng: number;
}

interface MapsHookComponentProps {
  updatePosition: ({ lat, lng }: Position) => void
}

const MapsHookComponent = ({ updatePosition }: MapsHookComponentProps) => {
  const map = useMap();
  const coreLib = useMapsLibrary('core');

  useEffect(() => {
    if (!map || !coreLib) return;

    coreLib.event.addListener(map, 'click', function (e: any) {
      //  implement your onClick logic here

      const latLng = e.latLng;
      const latitude = latLng.lat() as number
      const longitude = latLng.lng() as number

      updatePosition({ lat: latitude, lng: longitude });
    })

    return () => {
      coreLib.event.clearListeners(map, 'click')
    }
  }, [map, coreLib, updatePosition]);

  return <></>;
};

const GoogleMap = () => {
  const [position, setPosition] = useState<Position>({ lat: 0, lng: 0 })

  const updatePosition = ({ lat, lng }: Position) => {
    setPosition({ lat, lng });
  }

  return (
    <APIProvider apiKey={MAPS_API_KEY}>
      <Map
        center={position}
        zoom={10}
      >
        <Marker position={position} />
        <MapsHookComponent updatePosition={updatePosition} />
      </Map>
    </APIProvider>
  );
}

In this example, I have used onClick to update the position of the marker whenever you click on a location on the map. If this code can be improved, please let me know.

[usefulthink]

As of version v0.3 this should now work.

See 820a301

[johnmarkredding]

In this example, I have used onClick to update the position of the marker whenever you click on a location on the map. If this code can be improved, please let me know.

I used the onLoadMap prop, but I'm not sure if it's preferable, since it doesn't include a clean-up function. I also didn't see any clean-up in the examples on Google's site…

const onLoadMap = useCallback((map) => {
  map.addListener('click', () => setModalData(null));
}, []);

<Map
  onLoadMap={onLoadMap}
  center={center}
  mapId={GMAPS_MAP_ID}
>