How to Get latitude and longitude from Google Maps React onClick

Question

i want to get the coordinates of google map react onclick. this is my code :

return (
    <GoogleMapReact
      google={this.props.google}
      styles={customizeMap}
      style= {ukuran}
      zoom={15}
      onClick={(e) => {
        console.log("latitude = ", e.latLng.lat());
        console.log("longtitude = ", e.latLng.lng());
      }}
      initialCenter={!!this.props.places && this.props.places ? (
        { lat: this.props.places.lat, lng: this.props.places.lng}
      ):({ lat: -7.747872, lng: 110.4218147  })}>
      <Marker 
        position={!!this.props.places && this.props.places ? (
          { lat: this.props.places.lat, lng: this.props.places.lng}
        ):({ lat: -7.747872, lng: 110.4218147  })}
        icon={{
          url: Icon,
          scaledSize:  new this.props.google.maps.Size(70, 55)
        }}
      />
    </GoogleMapReact>
);

and this is the message returned on the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
    at Object.onClick (halteMap.js:58:1)
    at index.js:311:1

a good tip to debug this issues of undefined, i will do the following, start your console.log at the parent element of the object console.log("latitude", e) then see the property you want and from the keep going further — aleEspinosaM, Apr 01 '22 at 08:07

score 0 · Answer 1 · edited Apr 01 '22 at 12:48

0

this is late answer but in my case this worked:

onClick={(e) => {
    console.log("latitude = ", e.lat)
    console.log("longtitude = ", e.lng);
}}

edited Apr 01 '22 at 12:48

Sebastian

951
6
21

answered Apr 01 '22 at 07:22

MrUsman

1
3

How to Get latitude and longitude from Google Maps React onClick

1 Answers1