How to get address based on lat lang lng in react google map

Question

I have a map rendered using react-google-map plugin. The flow is drag the marker and get the lat, lng and the address based on marker location. Im only getting the lat and lng. How can I get the address?

Here is my code below.

import React from "react"
import { compose, withProps, lifecycle } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
import "./config";

const MyMapComponent = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyDzzi_VBcf2Oef6LTViLU767UPNHlnIze4&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    lifecycle({
        componentWillMount() {
            const refs = {}

            this.setState({
                position: null,
                onMarkerMounted: ref => {
                    refs.marker = ref;
                },

                onPositionChanged: () => {
                    const position = refs.marker.getPosition();
                    
                    console.log(position.toString());
                }
            })
        },
    }),
    withScriptjs,
    withGoogleMap
)((props) =>
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
        {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} draggable={true} ref={props.onMarkerMounted} onPositionChanged={props.onPositionChanged} />}
    </GoogleMap>
    )

class custommap extends React.PureComponent {
    state = {
        isMarkerShown: false,
    }

    render() {
        return (
            <div>
                <MyMapComponent isMarkerShown={true} />
            </div>
        )
    }
}


export default custommap;

Any help are appreciated <3

score 1 · Answer 1 · answered Sep 16 '20 at 06:52

I just figured it out. I use react-geocode plugin.

  Geocode.fromLatLng(position.lat(), position.lng()).then(
                        response => {
                          const address = response.results[0].formatted_address;
                          console.log(address);
                        },
                        error => {
                          console.error(error);
                        }
                      );

How to get address based on lat lang lng in react google map

1 Answers1