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

Published at

11/13/2019

Categories

4 categories in total

Author

11 person written this

shimjudavid

open

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 -

key - that's your Google Geocoding API key
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 {
              setLoading(true);
              const res = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${key}`);
              const result = res.data.results[0].geometry.location;

              if (result.lat !== null && result.lng !== null) {
                setPosition({lat: result.lat, lng: result.lng})
              }
              else {
                setError(true);
              }
              setLoading(false);
          }
        catch (error) {
           setLoading(false);
           setError(true);
        }
      }


      useEffect(() => {
        fetchLatandLng();
      }, [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');

dev-resources.site

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