One pattern that comes up constantly in Rork projects: at some point, almost everyone wants some version of "show me what's nearby." A café finder, a local services directory, a travel guide — location plus place search is one of the most satisfying features to build, and also one of the areas where the setup has a few non-obvious steps.
This guide walks through building a working "find nearby cafés and display them on a map" feature using Google Places API and react-native-maps. The code is ready to use as-is, and I'll flag the two spots where most people hit a wall.
Setting Up Your Google Places API Key
Before writing any Rork code, get the API key set up in Google Cloud Console.
- Go to Google Cloud Console and create a new project
- In "APIs & Services" → "Library", search for "Places API" and enable it
- In "Credentials", create an API key. For production apps, restrict the key to your iOS Bundle ID or Android package name
# Add to your .env file — never hardcode API keys in source
EXPO_PUBLIC_GOOGLE_PLACES_API_KEY=YOUR_GOOGLE_PLACES_API_KEYThe EXPO_PUBLIC_ prefix makes the variable available in React Native code via process.env.EXPO_PUBLIC_GOOGLE_PLACES_API_KEY, with no extra configuration needed. Make sure .env is in your .gitignore.
One thing worth noting upfront: a valid API key is necessary but not sufficient. Google Places API requires an active billing account linked to your Cloud project. Without it, requests will be denied even with a correct key — this is the source of a lot of confusion, so I'll come back to it in the troubleshooting section.
Creating the Project in Rork
Open Rork Companion and use a prompt like this to generate the initial structure:
Create an app that gets the user's current location and searches for cafés
within 500 meters using the Google Places API. Display results as markers
on a map. Tapping a marker should show the place name and address.
Use fetch for API calls and manage state with useState and useEffect.
When Rork generates the code, check that expo-location is in the dependencies. This package handles both the OS permission dialog and the actual coordinate retrieval — without it, you can't access location data.
Implementing Location Access and Place Search
Separating the location and API logic into a custom hook keeps the map component focused on rendering. Here's the hook:
import * as Location from 'expo-location';
import { useState, useEffect } from 'react';
type Place = {
place_id: string;
name: string;
vicinity: string;
geometry: {
location: { lat: number; lng: number };
};
};
export function useNearbyPlaces() {
const [places, setPlaces] = useState<Place[]>([]);
const [userLocation, setUserLocation] = useState<{ lat: number; lng: number } | null>(null);
const [error, setError] = useState<string | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
// Request foreground location permission
const { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setError('Location permission was not granted');
setLoading(false);
return;
}
// Get current position
const location = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.Balanced,
});
const { latitude: lat, longitude: lng } = location.coords;
setUserLocation({ lat, lng });
// Search for nearby cafés with Google Places API
const apiKey = process.env.EXPO_PUBLIC_GOOGLE_PLACES_API_KEY;
const radius = 500; // meters
const type = 'cafe';
const url =
`https://maps.googleapis.com/maps/api/place/nearbysearch/json` +
`?location=${lat},${lng}&radius=${radius}&type=${type}&key=${apiKey}`;
const response = await fetch(url);
if (!response.ok) {
setError('Failed to load nearby places');
setLoading(false);
return;
}
const data = await response.json();
// Expected response shape: { results: [...], status: "OK" }
setPlaces(data.results ?? []);
setLoading(false);
})();
}, []);
return { places, userLocation, error, loading };
}The error handling covers both permission denial and network failures. In practice, both will happen — permission dialogs get dismissed, and network conditions vary — so handling them explicitly prevents cryptic crashes in production.
Rendering Markers on the Map
With the hook handling the data, the map component stays clean:
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';
import { View, Text, StyleSheet } from 'react-native';
import { useNearbyPlaces } from './useNearbyPlaces';
export default function NearbyPlacesMap() {
const { places, userLocation, error, loading } = useNearbyPlaces();
if (loading) return <Text style={styles.status}>Finding your location...</Text>;
if (error) return <Text style={styles.status}>{error}</Text>;
if (!userLocation) return null;
return (
<View style={styles.container}>
<MapView
style={styles.map}
provider={PROVIDER_GOOGLE}
initialRegion={{
latitude: userLocation.lat,
longitude: userLocation.lng,
latitudeDelta: 0.01,
longitudeDelta: 0.01,
}}
showsUserLocation
>
{places.map((place) => (
<Marker
key={place.place_id}
coordinate={{
latitude: place.geometry.location.lat,
longitude: place.geometry.location.lng,
}}
title={place.name}
description={place.vicinity}
/>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
map: { flex: 1 },
status: { flex: 1, textAlign: 'center', marginTop: 100, fontSize: 16 },
});What to expect: The map opens centered on the user's current location. Red pins appear for cafés within 500m. Tapping a pin shows the place name and address in a callout bubble.
Two Places Where People Get Stuck
ZERO_RESULTS or REQUEST_DENIED from the API: This almost always means the billing account isn't linked. A valid API key alone isn't enough — Places API requires an active billing account in Google Cloud Console. Go to Billing and connect a payment method. There's a generous free tier, so you won't incur actual charges for a dev project, but the account still needs to be set up. Without it, the API silently rejects requests even when the key is correctly configured.
Blank white map on Android: When using PROVIDER_GOOGLE with react-native-maps, Android requires a google-services.json file in the project root. If it's missing, the map renders as a blank white screen — no error message, no crash. iOS doesn't have the same requirement, but Android builds will fail silently without it. Check this before your first Android build.
For a broader look at patterns that apply across different external services, the External API Integration Guide covers request handling, error states, and environment variable management in more depth.
Where to Take the App Next
The app you've built at this point is a working MVP — a real device, real pins, real nearby cafés. Some directions worth exploring from here:
Adding a category switcher (café / restaurant / convenience store / pharmacy) only requires changing the type parameter in the API URL. It's a small change that significantly broadens what the app can do.
For saving favorite places, the Supabase spot-sharing tutorial shows how to store and share location data with persistent state — including the social layer if you want users to share lists with each other.
Place details are available via a separate endpoint that takes place_id as input. This unlocks photos, opening hours, ratings, and phone numbers — everything needed to build a detail screen that's worth releasing.
The First Step
Get the API key, link the billing account, and paste this code into a new Rork project. Running the app on a real device and seeing actual pins appear near your current location is a different experience than working with mock data — it makes the next set of features much easier to think through concretely.
Location-based apps have a tangible quality to them. Worth experiencing early.