is there any way to get the location name from the longitude and latitude positions in react js google map

Question

I am using reactjs google map component.Is there any way to display the location name in the 'infowindow'? How can i get the current location name from the positions?

    import React from 'react';
import { compose, withProps,withHandlers,lifecycle } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker,InfoWindow } from "react-google-maps"
import { MarkerClusterer } from 'react-google-maps/lib/components/addons/MarkerClusterer';
import { connect } from 'react-redux';


export default class DemoApp extends React.Component {
   testFunc(val) {
            console.log(val);
        }
    render() {
        var areaName,locName="dsf";

        const MyMapComponent = compose(
            withProps({
                googleMapURL: ('https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=AIzaSyAoaDS6fIKlYvEHeTaakCxXqp-UwnggoEg'),
                loadingElement: (<div style={{ height: '100%' }} />),
                containerElement: (<div style={{ height: '400px' }} />),
                mapElement: (<div style={{ height: '100%' }} />)
            }),
            withScriptjs,
            withGoogleMap,
            lifecycle({
                componentWillMount() {

                    let geocoder = new window.google.maps.Geocoder();
                    geocoder.geocode( { 'latLng': {lat:this.props.newMap.lat,lng:this.props.newMap.lng}}, function(results, status) {
                        if (status == 'OK') {
                            console.log('here result of geocoder', results);
                            if (results[0]) {
                                let adrs_comp = results[0].address_components;
                                for(let  i = 0; i < adrs_comp.length; i++) {
                                    if(adrs_comp[i].types[0] === "locality" ) {
                                        locName = adrs_comp[i].long_name;
                                        console.log("loc name");
                                        console.log(locName);
                                        console.log("loc name");
                                        testFunc(locName);
                                    }
                                    if(adrs_comp[i].types[0] === "administrative_area_level_1" ) {
                                        areaName = adrs_comp[i].long_name;
                                        console.log("area name");
                                        console.log(areaName);
                                        console.log("area name");
                                    }
                                }
                            }
                        } else {
                            console.log('Geocode was not successful for the following reason: ' + status);
                        }
                    });
                }
            })
        )(props =>
            <GoogleMap
                zoom={this.props.myMap.zoom}
                center={{lat:this.props.myMap.lat, lng:this.props.myMap.lng}}
            >
             <Marker
          position={{lat:this.props.myMap.lat, lng:this.props.myMap.lng }} >
          <InfoWindow>
            <p>{locName}</p>

          </InfoWindow>
          </Marker>
            </GoogleMap>
        );

        return(
            <MyMapComponent newMap={this.props.myMap} />
        );
    }
}

In the above code I want to display the location name inside the infowindow .Is there any way to get the location name from the positions ?

Answer 1

By using this you can get user state and district name from user location in google maps .

import React, {  useState,  useEffect } from 'react';
import Geocode from "react-geocode";
import { usePosition } from 'use-position';

function Getadress() {
    const {latitude, longitude, error} = usePosition();
    const [District, setDistrict] = useState(null);
    const [States, setStates] = useState(null);
  
    Geocode.setApiKey(""); ///here put api key 
    Geocode.setLanguage("en");
    Geocode.setRegion("IN");
    useEffect(() => {
    // console.log(latitude,longitude,State,District)
    if((States==null || District==null )&& latitude!==null){
    Geocode.fromLatLng(latitude, longitude).then(
      response => {
       
        for (var i=0; i<response.results[0].address_components.length; i++) {
          for (var b=0;b<response.results[0].address_components[i].types.length;b++) {

              if (response.results[0].address_components[i].types[b]=== "administrative_area_level_2") {
                  var city= response.results[0].address_components[i];
              
                  setDistrict(city.long_name)
                  break;
              }
          }    
      }
  
    for (var i=0; i<response.results[0].address_components.length; i++) {
      for (var b=0;b<response.results[0].address_components[i].types.length;b++) {
          if (response.results[0].address_components[i].types[b] === "administrative_area_level_1") {
              var state = response.results[0].address_components[i];
              setState(state.long_name)
  
              break;
          }
      }    
  }
      },
      error => {
        console.error(error);
      }
    );
  }
  });
        return(
                <p></p>
        );
}

export default Getadress;

Answer 2

Here is an example code which uses google geocoder api to get location details from latlong. Provided you have included google map script in your application

const geocoder = new window.google.maps.Geocoder();
const my_location = {
    lat: position.coords.latitude,
    lng: position.coords.longitude
};

getLocName = (my_location) => {
    geocoder.geocode({ 'latLng': my_location }, function (results, status) {
        if (status === window.google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                let adrs_comp = results[0].address_components, loc_name, area_name;
                for(let  i = 0; i < adrs_comp.length; i++) {
                    if(adrs_comp[i].types[0] === "locality" ) {
                        loc_name = adrs_comp[i].long_name;
                    }
                    if(adrs_comp[i].types[0] === "administrative_area_level_1" ) {
                        area_name = adrs_comp[i].long_name;
                    }
                }
            }
        }
    });
}

Dont forget to include Google Maps Script in your application

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,visualization"></script>