Encountering TypeError when accessing 'sw' property in Google Maps and RapidAPI integration

Other Questions RapidAPI
1

I’m stuck with a TypeError while working on a project that combines Google Maps API and RapidAPI. The error says it can’t read properties of null when trying to access ‘sw’.

Here’s a simplified version of what I’m trying to do:

const fetchLocationData = async (southWest, northEast) => {
  const apiEndpoint = 'https://example-api.com/locations';
  
  try {
    const response = await fetch(apiEndpoint, {
      params: {
        minLat: southWest.lat,
        minLng: southWest.lng,
        maxLat: northEast.lat,
        maxLng: northEast.lng
      },
      headers: {
        'API-Key': 'your-api-key-here'
      }
    });
    
    return await response.json();
  } catch (err) {
    console.error('API call failed:', err);
  }
};

// In another part of the code:
useEffect(() => {
  if (mapBoundaries) {
    fetchLocationData(mapBoundaries.southWest, mapBoundaries.northEast)
      .then(data => updateLocations(data))
      .catch(err => console.error('Failed to update locations:', err));
  }
}, [mapBoundaries]);

The code worked fine before, but now it’s throwing errors. Any ideas what might be causing this? I’ve double-checked my API keys and endpoints, but I’m stumped.

2

I’ve run into similar issues when working with Google Maps and external APIs. The TypeError you’re experiencing is likely due to the mapBoundaries object being null or undefined when the useEffect hook runs.

A common cause for this is that the map hasn’t fully loaded or initialized when the effect tries to access its properties. To fix this, you could add a null check before calling fetchLocationData:

useEffect(() => {
  if (mapBoundaries && mapBoundaries.southWest && mapBoundaries.northEast) {
    fetchLocationData(mapBoundaries.southWest, mapBoundaries.northEast)
      .then(data => updateLocations(data))
      .catch(err => console.error('Failed to update locations:', err));
  }
}, [mapBoundaries]);

This ensures that mapBoundaries and its properties exist before trying to use them. Additionally, you might want to add a loading state to your component to handle the period before the map is fully initialized. This approach has worked well for me in similar situations.

3

hey mate, sounds like ur mapBoundaries might be undefined when the effect runs. try adding a check for that:

useEffect(() => {
  if (mapBoundaries?.southWest && mapBoundaries?.northEast) {
    fetchLocationData(mapBoundaries.southWest, mapBoundaries?.northEast)
      .then(data => updateLocations(data))
      .catch(err => console.error('Failed to update locations:', err));
  }
}, [mapBoundaries]);

this should prevent the error. good luck!

4

Have you considered the possibility that the Google Maps API isn’t fully loaded when your code tries to access the mapBoundaries? This can happen if you’re not using the correct callback or event listener for map initialization.

Try wrapping your map initialization code in a callback function that’s triggered when the map is fully loaded. Something like this:

function initMap() {
  const map = new google.maps.Map(document.getElementById('map'), {
    // your map options here
  });

  google.maps.event.addListenerOnce(map, 'idle', function() {
    // Map is ready
    const bounds = map.getBounds();
    const mapBoundaries = {
      southWest: bounds.getSouthWest(),
      northEast: bounds.getNorthEast()
    };
    // Now you can safely use mapBoundaries
  });
}

This approach ensures that the map and its properties are fully available before you try to access them, which should resolve your TypeError.