title: Get Address from longitude and latitude reactjs in mui-Datagrid
body: <p>this is the function which return the address from longitude and latitude,
  i get  data from database with axios ,the content of the address cell is not an address but the values of longitude and latitude</p>
  <pre><code>    const getaddress = (lng, lat) =&gt; {
      var latlng = new window.google.maps.LatLng(lat, lng)
      // This is making the Geocode request
  
      const geocoder = new window.google.maps.Geocoder()
      geocoder.geocode({ 'latLng': latlng }, (results, status) =&gt; {
        // if (status !== window.google.maps.GeocoderStatus.OK) {
        //   }
        // This is checking to see if the Geoeode Status is OK before proceeding
        if (status === window.google.maps.GeocoderStatus.OK) {
          console.log(results[3].formatted_address)
          return results[3].formatted_address
        } else {
          console.log('Geocode was not successful for the following reason: ' + status)
        }
      })
    }
  </code></pre>
  <pre><code>  async function getUsers (role, status, phone, nom, id, limit, offset) {
      var token = sessionStorage.getItem('token')
      // console.log(token)
      const dataT = await axios
        .get(server + '/v2/profiles/?role=' + role + '&amp;status=' + status + '&amp;phone=' + phone + '&amp;name=' + nom + '&amp;id=' + id + '&amp;limit=' + limit + '&amp;offset=' + offset, {
          headers: {
            Authorization: `Token ${token}`
          }
        })
        .then((response) =&gt; {
          if (response) {
            return response.data
          }
        })
        .catch(() =&gt; {
          // console.log(error);
        })
      setData(dataT)
  }
  
  const columns = [
      {
        field: 'avatar',
        width: 50,
        headerName: 'Avatar',
        renderCell: (params) =&gt; (&lt;Avatar src={params.value} /&gt;)
      },
      {
        field: 'id',
        width: 100,
        headerName: 'ID'
      },
      {
        field: 'name',
        headerName: 'Nom',
        width: 200
      },
      {
        field: 'role',
        headerName: 'Rôle',
        width: 120,
        renderCell: (params) =&gt; (&lt;Badge color={params.value === 'Transporteur' ? 'primary' : 'info'}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'phone',
        headerName: 'Téléphone',
        width: 130
      },
      {
        field: 'address',
        headerName: 'Adresse',
        width: 200,
        renderCell: (params) =&gt; {
          getaddress(params.value[0], params.value[1])
        }
      },
      {
        field: 'status',
        headerName: 'Status',
        width: 200,
        renderCell: (params) =&gt; (&lt;Badge color={getcolor(params.value)}&gt;{getaccoutStatus(params.value)}&lt;/Badge&gt;)
      },
      {
        field: 'training_scheduled',
        headerName: 'Formation prévue le ',
        width: 200,
        type: 'datetime',
        renderCell: (params) =&gt; (params.value ? &lt;Badge color='warning'&gt;{params.value}&lt;/Badge&gt; : null)
      },
      {
        field: 'trained_at',
        headerName: 'Formation efféctuée le',
        width: 200,
        type: 'datetime',
        renderCell: (params) =&gt; (params.value ? &lt;Badge color='success'&gt;{params.value}&lt;/Badge&gt; : null)
      },
      {
        field: 'RC',
        headerName: 'Regitsre Commerce',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'PC',
        headerName: 'Permis de Conduire',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'CJ',
        headerName: 'Casier Judiciaire',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'CG',
        headerName: 'Carte Grise',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'CT',
        headerName: 'Carte de Transport',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'PI',
        headerName: 'Permis de Circulation',
        width: 180,
        renderCell: (params) =&gt; (&lt;Badge color={getColors(params.value)}&gt;{params.value}&lt;/Badge&gt;)
      },
      {
        field: 'rating_client',
        headerName: 'Rating Client',
        renderCell: (params) =&gt; (
          &lt;Rating
            name='customized-empty'
            defaultValue={params.value}
            precision={0.5}
            emptyIcon={&lt;StarBorderIcon /&gt;}
            readOnly
          /&gt;),
        width: 200
      },
      {
        field: 'rating_driver',
        headerName: 'Rating Driver',
        renderCell: (params) =&gt; (
          &lt;Rating
            name='customized-empty'
            defaultValue={params.value}
            precision={0.5}
            emptyIcon={&lt;StarBorderIcon /&gt;}
            readOnly
          /&gt;),
        width: 200
      },
      {
        field: 'email',
        headerName: 'Email',
        width: 250
      },
      {
        field: 'payment_method',
        headerName: 'Méthode de paiement',
        width: 150
      },
      {
        field: 'created_at',
        headerName: 'Créé le',
        width: 180
      },
      {
        field: 'available_from',
        headerName: 'Disponibe de',
        width: 150
      },
      {
        field: 'available_to',
        headerName: 'Disponible à',
        width: 150
      },
      {
        field: 'created_by',
        headerName: 'Créé par',
        width: 150
      }
  ]
  
   const rows =
      (data || []).map((item) =&gt; {
        return {
          avatar: item.picture,
          id: item.id,
          status: item.account_status,
          name: item.last_name + ' ' + item.first_name,
          rating_driver: item.driver_rating,
          rating_client: item.client_rating,
          email: item.email,
          phone: item.phone,
          role: item.is_driver === true ? 'Transporteur' : 'Client',
          trained_at: item.trained_at,
          training_scheduled: item.training_scheduled,
          address: [item.location_longitude, item.location_latitude],
          payment_method: item.payment_method === 1 ? 'Postpayé' : 'Prépayé',
          created_at: moment(item.created_at).format('YYYY/MM/DD hh:mm'),
          // is_active: item.is_active==true ?  &quot;Active&quot;: &quot;Non Active&quot;,
          available_from: item.available_from,
          available_to: item.available_to,
          created_by: item.created_by,
          documents: item.documents,
          RC: getdoc(getdocument(item.documents), 1),
          PC: getdoc(getdocument(item.documents), 2),
          CJ: getdoc(getdocument(item.documents), 6),
          CG: getdoc(getdocument(item.documents), 7),
          CT: getdoc(getdocument(item.documents), 8),
          PI: getdoc(getdocument(item.documents), 9)
          // actions: item.id
        }
      })
  </code></pre>
  <p>i get nothing in column address , i try async and await in function getaddress but i have some errors .
  the response of the function return delay compared to render of component datagrid</p>