Fetch Nearest Places in React Native Using Google Places API

It’s a common requirement in Apps to fetch nearest Places using Google Places API. In this article, I will explain how to fetch the nearest places in React Native using google places API. You can use this method to fetch places for both Android & IOS Apps.

Method to Fetch Nearest Places in React Native

fetchNearestPlacesFromGoogle = () => {

    const latitude = 25.0756; // you can update it with user's latitude & Longitude
    const longitude = 55.1454;
    let radMetter = 2 * 1000; // Search withing 2 KM radius

    const url = 'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=' + latitude + ',' + longitude + '&radius=' + radMetter + '&key=' + YOUR_API_KEY

    fetch(url)
      .then(res => {
        return res.json()
      })
      .then(res => {

      var places = [] // This Array WIll contain locations received from google
        for(let googlePlace of res.results) {
          var place = {}
          var lat = googlePlace.geometry.location.lat;
          var lng = googlePlace.geometry.location.lng;
          var coordinate = {
            latitude: lat,
            longitude: lng,
          }

          var gallery = []

          if (googlePlace.photos) {
           for(let photo of googlePlace.photos) {
             var photoUrl = Urls.GooglePicBaseUrl + photo.photo_reference;
             gallery.push(photoUrl);
          }
        }

          place['placeTypes'] = googlePlace.types
          place['coordinate'] = coordinate
          place['placeId'] = googlePlace.place_id
          place['placeName'] = googlePlace.name
          place['gallery'] = gallery

          places.push(place);
        }

        // Do your work here with places Array
      })
      .catch(error => {
        console.log(error);
      });
    
  }

In this method, Google places Nearby Search API is used. But you can also use other request types as per your requirement. Don’t forget to change your API key in the method. In the end you will get Google places in places array.

Enjoy 🙂

You can also find many other React Native Coding Articles.

Please share this post:
Native Mobile Application Developer (Android + IOS) having experience in Java, Swift, Kotlin, Objective C, Unity, C#, C/C++, NODE JS & PHP.

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: