React Native Location
You can use the Google Maps Geocoding API to convert latitude and longitude into a location name programmatically in a React application. Here’s how you can do it:
Steps:
Implementation:
import React, { useState, useEffect } from "react";
const ReverseGeocoding = () => {
const [location, setLocation] = useState("Fetching location...");
const API_KEY = "YOUR_GOOGLE_MAPS_API_KEY"; // Replace with your API key const lat = 33.550196043186745; const lng = 73.12402010408547;
useEffect(() => {
const fetchLocationName = async () => {
try {
const response = await fetch( https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${API_KEY} );
const data = await response.json();
if (data.status === "OK") {
setLocation(data.results[0].formatted_address);
} else {
setLocation("Location not found");
} }
catch (error)
{ setLocation("Error fetching location"); console.error("Geocoding error:", error);
} };
fetchLocationName(); }, []);
return ( <div> <h2>Location Name:</h2> <p>{location}</p> </div> ); };
export default ReverseGeocoding;
Explanation:
Output:
If the location is found, it will display something like:
Location Name: Bahria Town Phase 8, Rawalpindi, Pakistan