DEV Community

Shimju David
Shimju David

Posted on

useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.

You might have encountered this requirement commonly where you want to display a google map on a listing details page and show a marker on it based on the address of the listing or a location. Here we want to pass the address of a listing or a location and you want the latitude and longitude as a return. Using Google's Geocoding API, we can extract this logic as a custom hook called useGeoPosition.

useGeoPosition hook-

This hook accepts two parameters -

  1. key - that's your Google Geocoding API key
  2. address- that's the address of your location where you want its latitude and longitude in return
import React, { useState, useEffect} from 'react'
    import axios from 'axios';

    const useGeoPosition = (key, address) => {
      const [position, setPosition] = useState({ lat: null, lng: null });
      const [error, setError] = useState(false);
      const [loading, setLoading] = useState(false);

      const fetchLatandLng = async () => {
        try {
              const res = await axios.get(`${address}&key=${key}`);
              const result =[0].geometry.location;

              if ( !== null && result.lng !== null) {
                setPosition({lat:, lng: result.lng})
              else {
        catch (error) {

      useEffect(() => {
      }, [address])

      return [position, loading, error]

    export default useGeoPosition;

You can now call this hook in your React component as

 const [position, geoloading, geoerror] = useGeoPosition(<PassYourGoogleKey>,'Boyd St,Long Beach');

Top comments (0)