DEV Community

Dainy Jose
Dainy Jose

Posted on

Showing Nearby Places & Routes in React Native Maps

#reactnative #map #googlemapsapi

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

  1. Go to your Google Cloud Console

  2. Enable:

  • Maps SDK for Android / iOS

  • Places API

  • Directions API

  1. 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
Enter fullscreen mode Exit fullscreen mode

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<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 },
});
Enter fullscreen mode Exit fullscreen mode

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.

✍️ 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

📬 Connect with me:
🌐 Portfolio
🔗 LinkedIn
💻 GitHub

Top comments (0)