Encountering null property error when accessing coordinates with Google Maps API and RapidAPI

Other Questions RapidAPI
1

I’m experiencing a problem where I encounter a null property error when trying to access the bounds of coordinates using Google Maps while working with a RapidAPI service.

Functional version without dynamic coordinates:

import axios from 'axios';

const API_URL = "https://travel-advisor.p.rapidapi.com/restaurants/list-in-boundary";

const requestConfig = {
  params: {
    // Hardcoded values work correctly
    bl_latitude: "11.847676",
    tr_latitude: "12.838442",
    bl_longitude: "109.095887",
    tr_longitude: "109.149359",
  },
  headers: {
    "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
    "x-rapidapi-key": "key",
  },
};

export const fetchPlacesData = async () => {
  try {
    const response = await axios.get(API_URL, requestConfig);
    return response.data.data;
  } catch (error) {
    console.error(error);
  }
};

// Component setup
const [mapBounds, setMapBounds] = useState(null);
const [placesList, setPlacesList] = useState([]);

useEffect(() => {
  fetchPlacesData().then((places) => {
    setPlacesList(places);
  });
}, []);

Problematic version with dynamic bounding coordinates:

export const fetchPlacesData = async (southwest, northeast) => {
  try {
    const response = await axios.get(API_URL, {
      params: {
        bl_latitude: southwest.lat,
        bl_longitude: southwest.lng,
        tr_latitude: northeast.lat,
        tr_longitude: northeast.lng,
      },
      headers: {
        "x-rapidapi-host": "travel-advisor.p.rapidapi.com",
        "x-rapidapi-key": "key",
      },
    });
    return response.data.data;
  } catch (error) {
    console.error(error);
  }
};

useEffect(() => {
  navigator.geolocation.getCurrentPosition(
    ({ coords: { latitude, longitude } }) => {
      setCoordinates({ lat: latitude, lng: longitude });
    }
  );
}, []);

useEffect(() => {
  fetchPlacesData(mapBounds.southwest, mapBounds.northeast).then((places) => {
    setPlacesList(places);
  });
}, [coordinates, mapBounds]);

This issue occurs right after I started using dynamic coordinates. I’ve done a comparison with git but I’m unable to identify the problem. Any help would be appreciated!

2

Had the same issue with Google Maps bounds. Your useEffect runs when coordinates change, but mapBounds isn’t ready yet - geolocation fires first, then the map component populates bounds later. I split it into two useEffects: one that only watches mapBounds with a null check. Also, mapBounds.southwest and mapBounds.northeast might not exist even when mapBounds does - I’d console.log the actual mapBounds structure to see what Google’s actually returning. Mine had completely different properties than I expected.

3

Yeah, it’s definitely a timing issue. Your second useEffect fires when coordinates OR mapBounds change, but mapBounds is still empty when coordinates gets set from geolocation. I hit the same thing last year - my API call ran before Google Maps’ onBoundsChanged callback fired. You need mapBounds to actually have data before making that API request. Also double-check that your Google Maps component is setting mapBounds state when the map loads or bounds change. Can’t see your map component code, but I’m betting the bounds aren’t getting captured from the map instance properly.

4

yeah, looks like mapBounds might be null when your useEffect runs. Try adding a check like if (!mapBounds) return; before calling fetchPlacesData. The geolocation probably hasn’t finished setting mapBounds when that effect fires.