Introduction
In Part 1 we integrated maps into React Native, and in Part 2 we built a location picker.
Now, let’s make it smarter — by showing nearby places (like restaurants or stores) and drawing routes between two points.
We’ll use:
-
react-native-maps for rendering
-
Google Places API for nearby results
-
Google Directions API for routing
Step 1: Enable Required APIs
-
Go to your Google Cloud Console
-
Enable:
- Create or reuse an API key and restrict it to your app’s bundle ID or SHA-1.
Step 2: Basic Setup
npx expo install react-native-maps expo-location
npm install axios
Step 3: Fetch Nearby Places
import React, { useEffect, useState } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import MapView, { Marker, Polyline } from 'react-native-maps';
import * as Location from 'expo-location';
import axios from 'axios';
const GOOGLE_API_KEY = 'YOUR_GOOGLE_MAPS_API_KEY';
export default function NearbyMap() {
const [region, setRegion] = useState(null);
const [places, setPlaces] = useState([]);
const [routeCoords, setRouteCoords] = useState([]);
useEffect(() => {
(async () => {
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') return;
const pos = await Location.getCurrentPositionAsync({});
const { latitude, longitude } = pos.coords;
setRegion({
latitude,
longitude,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
});
fetchNearby(latitude, longitude);
})();
}, []);
const fetchNearby = async (lat: number, lng: number) => {
const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${lat},${lng}&radius=1000&type=restaurant&key=${GOOGLE_API_KEY}`;
const { data } = await axios.get(url);
setPlaces(data.results);
};
const drawRoute = async (destLat: number, destLng: number) => {
const url = `https://maps.googleapis.com/maps/api/directions/json?origin=${region.latitude},${region.longitude}&destination=${destLat},${destLng}&key=${GOOGLE_API_KEY}`;
const { data } = await axios.get(url);
const points = decode(data.routes[0].overview_polyline.points);
setRouteCoords(points);
};
// Polyline decoding helper
const decode = (t: string) => {
let points = [];
for (let step = 0, lat = 0, lng = 0; step < t.length;) {
let b, shift = 0, result = 0;
do { b = t.charCodeAt(step++) - 63; result |= (b & 31) << shift; shift += 5; } while (b >= 32);
lat += (result & 1) ? ~(result >> 1) : (result >> 1);
shift = result = 0;
do { b = t.charCodeAt(step++) - 63; result |= (b & 31) << shift; shift += 5; } while (b >= 32);
lng += (result & 1) ? ~(result >> 1) : (result >> 1);
points.push({ latitude: lat / 1e5, longitude: lng / 1e5 });
}
return points;
};
if (!region) return Loading map... ;
return (
{places.map((p, i) => (
drawRoute(p.geometry.location.lat, p.geometry.location.lng)}
/>
))}
{routeCoords.length > 0 && (
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
map: { flex: 1 },
});
What this does:
Step 4: Optimize UX
-
Use a bottom sheet to show place details.
-
Add filters for different types (
cafe,hospital, etc.). -
Cache responses for smoother panning.
Conclusion
With just a few APIs, you’ve now added intelligent location awareness to your app — users can view nearby places and get directions instantly.
Key takeaways:
-
Always restrict your API key.
-
Decode Google’s polyline for routes.
-
Combine Places + Directions APIs for real-time navigation features.
What’s Next
Next, I’ll explore “Building Real-Time Location Tracking in React Native” — ideal for delivery or event apps.
✍️ Written by Dainy Jose — React Native Mobile Application Developer with 3+ years of experience building cross-platform mobile apps using React Native (Expo, TypeScript, Redux).
Currently expanding backend knowledge through the MERN Stack (MongoDB, Express.js, React.js, Node.js) to create more efficient, full-stack mobile experiences.
💼 Tech Stack: React Native · TypeScript · Redux · Expo · Firebase · Node.js · Express.js · MongoDB · REST API · JWT · Jest · Google Maps · Razorpay · PayU · Agile · SDLC · Git · Bitbucket · Jira
