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'); 
Top comments (0)