Showing Nearby Places & Routes in React Native Maps

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:

Maps SDK for Android / iOS
Places API
Directions API

Create or reuse an API key and restrict it to your app’s bundle ID or SHA-1.

Step 2: Basic Setup

bashnpx expo install react-native-maps expo-location
npm install axios

Step 3: Fetch Nearby Places

bashimport 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<any>(null);
  const [places, setPlaces] = useState<any[]>([]);
  const [routeCoords, setRouteCoords] = useState<any[]>([]);

  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 <Text>Loading map...</Text>;

  return (
    <View style={styles.container}>
      <MapView style={styles.map} region={region}>
        {places.map((p, i) => (
          <Marker
            key={i}
            coordinate={{
              latitude: p.geometry.location.lat,
              longitude: p.geometry.location.lng,
            }}
            title={p.name}
            onPress={() => drawRoute(p.geometry.location.lat, p.geometry.location.lng)}
          />
        ))}
        {routeCoords.length > 0 && (
          <Polyline coordinates={routeCoords} strokeWidth={4} strokeColor="#007AFF" />
        )}
      </MapView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  map: { flex: 1 },
});

What this does:

Detects your location
Fetches nearby restaurants within 1 km
Draws a route when you tap a marker

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.

Showing Nearby Places & Routes in React Native Maps