Google-maps-react: Can I get lat and lng when user click on the map?

[Mostafasaffari]

Hi guys
I want to mark location when user clicked on map.
I think I should get location that user clicked on map and then result send to render marker.
may you have any suggestion or solution for me?

[Mostafasaffari]

I Solved it
I shared it if anyone need

  async componentDidMount() {
    const { lat, lng } = await this.getcurrentLocation();
    this.setState(prev => ({
      fields: {
        ...prev.fields,
        location: {
          lat,
          lng
        }
      },
      currentLocation: {
        lat,
        lng
      }
    }));
  }

   getcurrentLocation() {
    if (navigator && navigator.geolocation) {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(pos => {
          const coords = pos.coords;
          resolve({
            lat: coords.latitude,
            lng: coords.longitude
          });
        });
      });
    }
    return {
      lat: 0,
      lng: 0
    };
  }
  addMarker = (location, map) => {
    this.setState(prev => ({
      fields: {
        ...prev.fields,
        location
      }
    }));
    map.panTo(location);
  };

in render

<Map
                  google={this.props.google}
                  style={{
                    width: "100%",
                    height: "100%"
                  }}
                  initialCenter={this.state.fields.location}
                  center={this.state.fields.location}
                  zoom={14}
                  onClick={(t, map, c) => this.addMarker(c.latLng, map)}
                >
                  <Marker position={this.state.fields.location} />
                </Map>

[weijinnx]

@Mostafasaffari hey! What is navigator?

[Mostafasaffari]

@weijinnx
https://www.w3schools.com/Html/html5_geolocation.asp

[ckshameer]

@Mostafasaffari which map library you used??

[Mostafasaffari]

@shameersam
google-maps-react

[AikoRamalho]

Hey! what are the files of these pieces of code?

[Mostafasaffari]

@AikoRamalho
what do you want? this code include everything you need

[AikoRamalho]

I mean, where this code is? I want to know in witch file should I put

[Mostafasaffari]

@AikoRamalho
Where you want to make a map and get place from client. this code shows you a map.

[anasyo10]

Hi @Mostafasaffari i know this might be a stupid question but I am getting this error: " Uncaught TypeError: Cannot read property 'location' of undefined" It would be really great if you could help me out. Thanks

[Mostafasaffari]

@anasyo10 When does it fire error? and Which line fire error?

[shanno1]

@Mostafasaffari inside the addMarker() function location seems to be undefined.
The line number isn't relevant as depends on where you put it in you js file, but I console logged it and logs as undefined. any idea's?

[Mostafasaffari]

@shanno1
This is came by on click map and fill by this.addMarker(c.latLng, map).
I don't have any idea. Could you show me your code, perhaps I can help you.

[ckshameer]

Thanks, i got the solution

On Sun, Sep 9, 2018 at 1:49 AM Mostafa Saffari [e-mail]
wrote:

@shanno1 https://github.com/shanno1
This is from on click from map and fill by this.addMarker(c.latLng, map).
I don't have any idea. Could you show me your code, perhaps I can help you.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/fullstackreact/google-maps-react/issues/192#issuecomment-419670212,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AhdwmwyMDtkHU0SbzKW4UE5U6QwwVMqYks5uZCY0gaJpZM4TYy-Z
.

--
S A M

[Moji0098]

its get our current location , what r we ding that get our be clicked location somewhere in map ?!

[alfredohina]

Although it works perfectly, "this.addMarker(c.latLng)" returns "undefined" in console (same problema as shanno1). How can I capture the data (lat, lng) of each click?

[goskan93]

also I have the same issue, 'c.latLng' returns undefined, and I would like to capture the coordinate onClick

[goskan93]

Ah I found, just return each coordinate separately
lat = e.latLng.lat()
lng = e.latLng.lng()

[eur2]

Hi @goskan93 , I'm trying as you to get the coordinates with an "onClick" event on the map. When I do a console.log(e) on the click event, I get this strange global object that doesn't have an object latLng:
Rg {gm_bindings_: Object, __gm: tg, gm_accessors_: Object, mapTypeId: "roadmap", center: …}
How did you make it working your fonction e.latLng.lat()? Thanks!

[mahmoodkd]

parcham bala haj agha

[Freysi21]

When I'm calling e.latLng.lat() and e.latLng.lng() I get the previous click position on the map.
Any ideas what I might be doing wrong?

<Map initialCenter={{ lat: userPos?.coords.latitude, lng: userPos?.coords.longitude }} google={props.google} onClick={ (mapProps?: IMapProps, map?: any, event?) => onClick(mapProps, map, event) }> {props.children} </Map>
This is the map instance I'm using.