React-google-maps: onClick Map to get Coordinates

[SandroBCIT]

I was wondering how I can retrieve the coordinates of the GoogleMap onClick event? I can only find something called "oe" and it only returns X and Y that don't equal to Lat and Long values.

What am I missing here?

[willfre]

You need to access the event:
onClick={(e) => handleClick(e)}
then
function handleClick(event) {var lat = event.latLng.lat(), lng = event.latLng.lng()}

[felixb101]

I have the same issue. I tried willfre suggested code but the handleClick(event) method still does not have the event passed through. The argument "event" is not the click event at all. Any idea why?

[prodislav]

@felixb101 Have you solved your issue?

[felixb101]

I ended up not using this code. Here is what I used instead:

const loadGoogleMaps = (callback) => {
const existingScript = document.getElementById('googleMaps');
//console.log('got here');

if (!existingScript) {
const script = document.createElement('script');
script.src = Meteor.settings.public.GMaps;
script.id = 'googleMaps';
document.body.appendChild(script);

script.onload = () => {
  if (callback) callback();
};

}
};

To load the map, call this function within "componentWillMount", and attach the listener this way:
loadGoogleMaps(() => {
// Work to do after the library loads.
console.log('library loaded');
this.map = new google.maps.Map(this.refs.map, {
center: {lat: 45.51985303707204, lng: -74.76520471291747},
zoom: 11,
mapTypeId: 'roadmap',
});

      // Listen on click to get ControlPosition
      this.map.addListener('click', (e) => {
        const the_click =  { lat: e.latLng.lat(), lng: e.latLng.lng()};
        this.handleMapClick(the_click);
      });

...more code
}

[prodislav]

@felixb101 so can I handle click on map ?
CAn I take geolocation coordinates?

[olee2002]

It works like charm with the onClick event. Just like what willfre mentioned above.

[praneetha-ck-robo]

You need to access the event:
onClick={(e) => handleClick(e)}
then
function handleClick(event) {var lat = event.latLng.lat(), lng = event.latLng.lng()}

How to fetch the name and address of the location? If you go to https://www.google.co.in/maps you can see that on clicking of certain points in map, you will see the complete information on the left panel, which is not present in the event object. So, I tried using the reverse geocoding api, but it does not give the same location name and address.

[trblackw]

When adding an onClick to a Polygon component, is there a way to get all 4 (given that the polygon had 4 points) sets of coordinates? Currently the onClick just returns one set of coordinates even though there's 4 points so it's hard to interpret what they coordinates correspond to.

[AndresCampuzano]

You need to access the event:
onClick={(e) => handleClick(e)}
then
function handleClick(event) {var lat = event.latLng.lat(), lng = event.latLng.lng()}

What I did in was:

On the map, I set onClick={e => handleClickMap(e)}

Then:

// Getting coordinates from map const handleClickMap = event => { const lat = event.lat; const lng = event.lng; console.log('onClick map: ', lat, lng); };

I hope someone finds it useful