loading...
Cover image for Finding Nearby Places with using Places API in React Native

Finding Nearby Places with using Places API in React Native

yusasarisoy profile image Yuşa Sarısoy Updated on ・3 min read

Hi, everyone. My name is Yuşa Sarısoy. I am a software engineer from Istanbul, Turkey, and this will be my first article published on Medium, so I feel super excited about it. In this article, I will explain step by step how to fetch nearby places to your current location in React Native using the Places API. Since React Native is a cross-platform framework, you can use this method both for Android and iOS devices. I would like to emphasize that this will be for those who want to apply this method to an existing project. After these minor explanations, we can get to work.

First of all, we will open Google Cloud Platform to get our unique API key. In Google Cloud Platform, click the hamburger menu button on the left and you will see the “APIs & Services” section. In this section, we will go forward with “Credentials”. In Credentials, you will see this following screen:

Alt Text

To get the API key, click the “+ CREATE CREDENTIALS” at the top of the screen. After getting the API key, your API key will be shown on the screen.

Alt Text

After these procedures, we can start coding. I will use the Visual Studio Code to develop my React Native projects. In my GooglePlacesAPI.js, I will add my API key. Also, you can add the keyword that specifies the type of places you want to show around the current location. I will leave it as the comment code for now.

export const googleAPIKey = 'YOUR_API_KEY';
// export const placeType = 'cafe';

I will import these two constants where I want to use them.

import {googleAPIKey, placeType} from '../../Helpers/GooglePlacesAPI';

Then, I will set the async function called “fetchNearbyPlaces”. In this case, I will only assign specific values to latitude and longitude, since I take the location in a different way. Let’s assign the location values of San Francisco, CA, USA.

// Set charger station’s latitude & longitude.
const latitude = 37.773972;
const longitude = -122.431297;

After assigning the location values, we need to set the maximum distance from the current location so that we can list the locations around us.

// Search within maximum 4 km radius.
let radius = 4 * 1000;

Now, this is one of the most critical parts, because we will set the URL to fetch data.

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

Finally, we can fetch the final data.

fetch(url)
  .then(res => {
    return res.json();
  })
  .then(res => {
    for (let googlePlace of res.results) {
      var place = {};
      var myLat = googlePlace.geometry.location.lat;
      var myLong = googlePlace.geometry.location.lng;
      var coordinate = {
        latitude: myLat,
        longitude: myLong,
      };
      place['placeTypes'] = googlePlace.types;
      place['coordinate'] = coordinate;
      place['placeId'] = googlePlace.place_id;
      place['placeName'] = googlePlace.name;
      places.push(place);
    }
    // Show all the places around 4 km from San Francisco.
    console.log(
      'The places around San Francisco, CA, USA: ' +
      places.map(nearbyPlaces => nearbyPlaces.placeName),
    );
  })
  .catch(error => { 
    console.log(error);
  });
});

And we are in the last step. Let’s call the function and see what its result will be.

Alt Text

We get exactly what we want. If you have any questions, do not hesitate to contact me. Thank you for reading my first article. The next article will be about Yelp Fusion API. I wish you have a great day!

Alt Text

Posted on by:

yusasarisoy profile

Yuşa Sarısoy

@yusasarisoy

Not talented, just obsessed.

Discussion

markdown guide
 
 

its necessary we needed to enable billing in google cloud only cn get location?