Skip to main content
This guide covers common problems you might encounter when using react-native-maps-routes and how to solve them.

​
Common Issues

If your Google Maps API key isn’t working, check the following:1. Ensure the Routes API is enabledThe Google Maps Routes API is different from the Directions API. You must enable it in the Google Cloud Console:2. Check API key restrictionsIf you’ve set up API key restrictions, make sure they don’t block the Routes API:
  • In Google Cloud Console, go to “Credentials”
  • Edit your API key
  • Under “API restrictions”, ensure “Routes API” is in the allowed list
3. Verify billing is enabledThe Routes API requires a billing account to be linked to your Google Cloud project, even if you’re within the free tier.4. Check for quota limitsYou might have exceeded your daily quota. Check the “Quotas” section in Google Cloud Console.Error example:
{
  "error": {
    "code": 403,
    "message": "The request is missing a valid API key."
  }
}
If the route isn’t appearing on your map, try these solutions:1. Check the onError callbackAdd an error handler to see what’s going wrong:
<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  onError={(error) => {
    console.error('Route error:', error);
  }}
/>
2. Verify coordinates are validEnsure your origin and destination have valid latitude and longitude properties:
const origin = { 
  latitude: 37.332280,  // Must be between -90 and 90
  longitude: -122.010980 // Must be between -180 and 180
};
3. Check MapView regionMake sure your MapView’s region includes both the origin and destination:
<MapView
  initialRegion={{
    latitude: (origin.latitude + destination.latitude) / 2,
    longitude: (origin.longitude + destination.longitude) / 2,
    latitudeDelta: Math.abs(origin.latitude - destination.latitude) * 2,
    longitudeDelta: Math.abs(origin.longitude - destination.longitude) * 2,
  }}
>
4. Verify strokeColor is visibleIf your map has a dark theme, a black stroke color might not be visible. Try a bright color:
strokeColor="#FF0000"  // Bright red
strokeWidth={6}        // Increase width
The ZERO_RESULTS status means the API couldn’t find a route between your locations.Common causes:1. Locations are too far apartThe Routes API might not find routes between very distant locations, especially for walking or cycling.2. Invalid travel mode for routeSome routes might not support certain travel modes:
// Might not work for pedestrian-only areas
mode="DRIVE"

// Try a different mode
mode="WALK"
3. Coordinates are in inaccessible locationsIf your coordinates are in the middle of an ocean or unmapped area, no route will be found.4. Route modifiers too restrictiveIf you’re avoiding too many things, no valid route might exist:
routeModifiers={{
  avoidTolls: true,
  avoidHighways: true,
  avoidFerries: true, // Try removing some restrictions
}}
Error example:
{
  "error": {
    "code": 400,
    "message": "ZERO_RESULTS"
  }
}
If you’re making too many requests, you might hit rate limits.Symptoms:
  • Error code 429
  • “Quota exceeded” messages
  • Routes stop loading after several successful requests
Solutions:1. Implement request debouncingDon’t fetch a new route on every coordinate change:
import { useEffect, useRef } from 'react';

const DebounceExample = ({ origin, destination }) => {
  const timeoutRef = useRef<NodeJS.Timeout>();
  const [debouncedOrigin, setDebouncedOrigin] = useState(origin);

  useEffect(() => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    timeoutRef.current = setTimeout(() => {
      setDebouncedOrigin(origin);
    }, 500); // Wait 500ms after last change

    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [origin]);

  return (
    <MapViewRoute
      origin={debouncedOrigin}
      destination={destination}
      apiKey={GOOGLE_MAPS_APIKEY}
    />
  );
};
2. Cache route resultsStore previously fetched routes to avoid redundant requests:
const [cachedRoutes, setCachedRoutes] = useState({});

const getCacheKey = (origin, destination) => 
  `${origin.latitude},${origin.longitude}-${destination.latitude},${destination.longitude}`;

<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  onReady={(coords) => {
    const key = getCacheKey(origin, destination);
    setCachedRoutes(prev => ({ ...prev, [key]: coords }));
  }}
/>
3. Increase quota limitsIn Google Cloud Console, you can request higher quota limits for production applications.
The API returns an error if coordinates are malformed or out of range.Valid coordinate ranges:
  • Latitude: -90 to 90
  • Longitude: -180 to 180
Common mistakes:1. Swapped latitude and longitude
// ❌ WRONG - longitude comes first
const origin = { latitude: -122.010980, longitude: 37.332280 };

// ✅ CORRECT
const origin = { latitude: 37.332280, longitude: -122.010980 };
2. Using string values instead of numbers
// ❌ WRONG - coordinates must be numbers
const origin = { latitude: "37.332280", longitude: "-122.010980" };

// ✅ CORRECT
const origin = { latitude: 37.332280, longitude: -122.010980 };
3. Using null or undefined values
// Always validate coordinates before rendering
{origin && destination && (
  <MapViewRoute
    origin={origin}
    destination={destination}
    apiKey={GOOGLE_MAPS_APIKEY}
  />
)}
Error example:
{
  "error": {
    "code": 400,
    "message": "Invalid value at 'origin.location.lat_lng.latitude'"
  }
}
The Google Maps Routes API supports a maximum of 25 waypoints between origin and destination.Error example:
{
  "error": {
    "code": 400,
    "message": "Too many waypoints. Maximum is 25."
  }
}
Solution:Limit your waypoints array to 25 items:
const MAX_WAYPOINTS = 25;

const limitedWaypoints = waypoints.slice(0, MAX_WAYPOINTS);

<MapViewRoute
  origin={origin}
  destination={destination}
  waypoints={limitedWaypoints}
  apiKey={GOOGLE_MAPS_APIKEY}
/>
If you need more than 25 waypoints, consider:
  • Breaking the route into multiple segments
  • Selecting only the most important waypoints
  • Using a route optimization algorithm to reduce waypoints
Some props behave differently on iOS and Android.iOS-specific issues:1. lineCap not supported on iOS with Google MapsThe lineCap prop doesn’t work on iOS when using the GoogleMaps provider:
// This prop is ignored on iOS with Google Maps
lineCap="square"
2. strokeColor behaves differentlyOn iOS, you might need to use different color formats:
// Use hex colors for best compatibility
strokeColor="#FF0000"  // ✅ Works on both platforms
strokeColor="red"      // ❌ Might not work consistently
Android-specific issues:1. Performance with many waypointsAndroid might struggle with routes that have many waypoints or complex polylines. Consider:
  • Reducing the number of waypoints
  • Simplifying the route
  • Using a lower strokeWidth
2. Map rendering delaysRoutes might appear with a slight delay on Android. Use the onReady callback to know when rendering is complete:
const [routeReady, setRouteReady] = useState(false);

<MapViewRoute
  origin={origin}
  destination={destination}
  apiKey={GOOGLE_MAPS_APIKEY}
  onReady={() => setRouteReady(true)}
/>
If you’re using TypeScript, you might encounter type-related issues.Common issues:1. Import types correctly
import { MapViewRoute } from 'react-native-maps-routes';
import type { 
  RouteModifiers, 
  LegField, 
  LegStepField,
  GoogleRouteLeg,
  TravelMode,
} from 'react-native-maps-routes';
2. LatLng type comes from react-native-maps
import type { LatLng } from 'react-native-maps';

const origin: LatLng = { latitude: 37.332280, longitude: -122.010980 };
3. Typing callbacks correctly
import type { GoogleRouteLeg } from 'react-native-maps-routes';

const handleLegs = (legs: GoogleRouteLeg[]) => {
  console.log('Received legs:', legs);
};

<MapViewRoute
  onLegs={handleLegs}
  legFields={['duration', 'distanceMeters']}
  // ...
/>

​
Still Having Issues?

If you’re still experiencing problems:
  1. Check the GitHub Issues to see if others have encountered the same problem
  2. Review the API Reference to ensure you’re using props correctly
  3. Look at the Examples for working code snippets
  4. Open a new issue on GitHub with:
    • Your react-native-maps-routes version
    • React Native version
    • Platform (iOS/Android)
    • Complete error message
    • Minimal reproducible code example
Always make sure you’re using the latest version of react-native-maps-routes. Many issues are resolved in newer versions.

Build docs developers (and LLMs) love

Get started for freeTalk to us