Build and Deploy a Google Maps Travel Companion Application | React.js

Key Takeaways

hello there and welcome to a project video where you'll build and deploy an advanced travel companion app using google maps with geolocation google maps api the ability to search for places fetching restaurants hotels and attractions based on location from specialized rapid apis data filtering and much more in this one video you'll learn advanced react best practices such as folder and file structure hooks and refs you're gonna also learn how to improve security by using environment variables you'll learn creating user interfaces using material ui you'll of course also learn working with google maps api and most importantly fetching data from unlimited sources using rapid api essentially you'll become the master of working with apis i initially planned on putting this as a paid course but i later decided to release it completely free for you guys here on youtube so to support this video leave a like comment and subscribe it shouldn't take more than a few seconds and i really appreciate it in the end of this video we'll deploy this application so that you can share it with your friends put it on your portfolio and get a job before we dive into the project i have an important announcement for you for quite some time now i have been working on something big i'm creating a custom platform where you'll be able to learn by creating even better and more professional projects it'll take a long time to turn this into a reality but i want you to make the most important decisions during the process so click the mailing list link down in the description so that you can stay up to date and choose which projects will be built first big news coming soon with that said let's dive straight into the video before we create a folder for our project code we must first visit rapid api the link is going to be down in the description the making of this entire app is possible only due to rapid api because we are using their travel advisor api this travel advisor api is just one of hundreds of thousands of apis available on their api hub you're gonna learn how to use most of these endpoints from this specific api how to get different hotels restaurants and attractions and finally we're gonna use one more api from their platform which is called open weather map this api is going to give us weather based on a city name or in our case based on the coordinates of the map so to be able to use these apis make sure to visit the rapid api link in the description and then you can click sign up or log in in this case i'm going to log in since i already have the account and you can log in with google github facebook or your regular email once you're in you'll be redirected to their api hub where you can find hundreds of thousands of apis this was the first step in our video now let's create our react application and then later on we're going to call these apis right from our react application before we dive into the code please allow me to give you a quick demo of the entire application at the top we have a navigation bar that says travel advisor explore new places and then in here we have entire google maps search so if you start typing something like new york you'll be able to see all the locations that are related to that search term we have beautiful images belonging to each single restaurant the restaurant's name rating number of reviews pricing all the specific certificates as well as the location and different types of food they prepare so everything is here in this nicely styled card as you can see this is how it looks like for example tomino is rated 5 stars out of 208 reviews the price is medium they are the 32nd best rated restaurant in new york city they have two certificates of excellence and they prepare spanish food on this location this is their phone number and if you click you'll be redirected to the tripadvisor page where you'll be able to read all the reviews also you can visit their website and as you can see this looks pretty good we can also filter restaurants by rating so let's search for all above 4.0 there we go and finally this website is not only for restaurants you can search for hotels take a look at this with just a bit of loading you get all the best hotels in new york city and the situation is the same you have a large image displaying the hotel you have the price ratings and all the certificates that they have and finally we also have attractions so let's say you're visiting new york this application gives you everything you need it gives you attractions you can visit places you can stay at and restaurants where you can eat at so in here you can see all the attractions that's looking pretty good and one more important thing is you can browse the map and locations reload every time you switch the map so there we go you can even unzoom to get more and you can click on a specific card and it's going to bring you right to it there we go soho you can visit everything there is to visit if you zoom out even more it's gonna give you more locations around new york and wider area i've also went ahead and implemented one more api to make this even more complete as you can see here we have the sun icon and right here we have the cloudy sun icon this is real time weather from new york we're gonna use one more extra api so that our visitor knows absolutely everything they need to know when they're visiting a specific place let's make sure our app works for different places so for example let's go to new delhi there we go it's currently cloudy there and take a look we have all the attractions there let's look for restaurants there we go so if you're visiting you know where to go since this is a big application during the process of building it you might come across a few errors that are going to happen to you and that's completely fine so if that happens the link to the entire github code is going to be down in the description make sure to visit it and then compare your code with the code right in here that should solve all of your potential problems while going through the video also while you're here make sure to give it a star as always to start off we're going to create a new folder let's name it something like travel underscore advisor there we go and finally we can also open an empty visual studio code window of course you can use any code editor in this case i'll be using visual studio code once you have it open simply drag and drop the folder right inside of it and we are in finally go to view and then terminal this is going to open the visual studio code integrated terminal now we're going to run some commands to initialize a react application to run these commands you have to have node installed so if you don't already make sure to visit nodejs.org and then simply download the current version once you do that you can simply run mpx create dash react dash app and then dot slash this is going to generate an empty react application right inside of your folder let's wait a minute while our application is initializing and we'll be right back and our application is initialized they say happy hacking we won't be hacking today but will be creating an amazing travel companion application with that said there's something that i always do to newly created react applications and that is to clean it up a bit as you can see we have quite a lot of files here which we're not going to use so let's simply delete the source folder and once it is deleted let's create a new folder called exactly the same now as you might know every react application needs to have an index.js file so this is going to be the first file we're going to create inside of the index.js file we can import react from react and then we can also import react react-dom from react-dom we're also going to import a file that doesn't exist yet that's going to be import app from dot slash app we're going to create that component really soon but for now let's say react dom dot render and then inside of that render we're gonna have the app component like this self closing component and then we're also gonna say document dot element and we're going to have root in every single react application we have to mount our application onto the root div if you're new to react let me show you where that div is we have quite a lot of files here as well so for now i'm going to delete them we don't need this favicon we also don't need these logos and the manifest so i'm going to delete all of them we only have the index.html and it might seem like we have a lot of stuff here but if we properly structure this out i'm going to put this in one line i'm going to remove these comments right here and you're going to notice that this is nothing more than an empty index.html document with a single div with an id of root and inside of here will be our entire react application with that said let's create our app.js this is going to be the starting point and the most important component of our entire application inside of here for now we're going to simply import react from react we're going to create a functional app component like this that's going to be const app is equal to an arrow function and then inside of there we can simply return in this case we're going to return a div inside of that div we're gonna have an h1 that says hello world and now that we have it of course it's not being used so we have to do export default app and finally if we end up seeing this on the screen that means that we have set up everything correctly before we go ahead and run this application let's open up view and then terminal and then inside of here let's install all the necessary dependencies throughout the process of building our application to install dependencies you can say npm install and then we can start listing them out the first dependency on the list is going to be add material dash ui forward slash core the second one is going to be add material dash ui forward slash icons the third one is going to be add material dash ui forward slash lab as you can see we'll use quite a lot of things from material ui then the next dependency is going to be add react dash google dash maps and then forward slash api we're also going to need axios and we're gonna need one more google map dependency this time for that little search bar at the top right so let's install google dash map dash react these are all the dependencies that we need so let's install them the process of installation is going to take a minute so feel free to grab a glass of water coffee beer whatever you prefer and get ready to code out this phenomenal project now that we've installed all the dependencies you can run npm start with that you can also close the terminal so that we can see our code better this automatically opened up our browser on localhost 3000 and we see hello world right here which means we've done everything correctly so far now is the time that we actually start building the layout and the functionality of our application let's start with the folder structure we're gonna have one new folder inside of the source folder which is going to be called components inside of that components we're gonna have four different components so let's create a new folder for each one of them the first one is going to be our header then also inside of the components we're gonna have a list this is going to be the list of places then we're going to have our map and finally we're going to have our place details component so let's call it place details now each one of these folders represents a component so let's create a component file for each one of them new file and that is going to be header.jsx let's repeat the process for all of them inside of the list list.jsx inside of the map that's going to be map.jsx and finally we are going to have place details so place details dot jsx each component is also going to have a separate style sheet coming from material ui so to create a style sheet simply create a new file inside of the folder let's start with the header and let's call it styles.js you can now copy this empty file three more times so list has to have styles map and finally the place details now let's create dummy components for each one of these components so we can start with a header and that's going to look like this import react from react const header that is going to be a functional component and then inside of there let's return in this case we want to return an h1 and the h1 is going to say header finally we also have to export that component so let's do export default header great so now this is our dummy component let's copy it let's first go to our list now to quickly rename a lot of things you can simply click on the header click f2 and then simply rename it in this case to list there we go and inside of there we can also say list let's go to our map copy and paste press f2 this is going to be a map inside of there we can also say map and finally to our place details we can paste it f2 this is going to be place details and then inside of there we can also one more time save place details now that we have all of the files and folders ready we can start importing them inside of our app.js so we can say import header from that's going to be dot slash components and then finally slash header and then just one more time header to get into that jsx component now we can duplicate this line two more times for the second time we can call this a list so to quickly rename it hold alt and then double click right there there and there this is going to be our list and then finally we also need a map so let's rename this to map great now we have everything that we need finally let's start importing some of the things from material ui to start creating our layout in this case we're going to say import curly braces we first need css baseline this is a component from material ui that simply normalizes the styles so it's just going to fix some paddings margins and background colors immediately for us and then we also need a grid that's going to be coming from add material ui forward slash core now inside of the jsx for our app we can turn this into a react fragment and then just below we can call a self-closing css baseline component instead of this h1 tag we're going to have our header component it's going to be a self-closing component below the header we're going to have our grid this grid is going to be of a type container so we can say container spacing is going to be equal to 3 and we can also give it an inline style that's going to be equal to width is equal to a string of a hundred percent remember since we're doing inline styles it has to be an object so you're going to have double curly braces inside of that grid we're going to have one more grid this grid is going to be of type item and it's going to have two properties xs is equal to 12. this means that this grid is going to take full width on mobile devices but then on medium devices and larger it's only going to take four spaces remember that list was only showing on the left side and the map was taking much more space this is what makes it happen only take 4 out of 12 spaces on medium or larger devices now we can expand that and we can copy that grid the first grid is going to contain our list component so we can say list and that list is going to be a self-closing tag finally the second grid is going to contain our map so let's say map which is also going to be our self-closing tag it said that the map is much larger when compared to the list so it's going to take eight spaces on medium or larger devices now let's save this and if our terminal is running we should be able to see this rendered on localhost 3000 and there we go initial layout and folder structure is done although this doesn't look like anything right now we simply have a header we have a list and then map on the side but we've done a lot of work we've prepared our code base for everything that's going to come right now so let's keep things going and let's create our header to start off we can close all of our other files and folders just so we have a clean workspace and then we can collapse it and simply open just the header.jsx inside of here we're first going to import a few things we can import in curly braces auto complete and this autocomplete is coming from react dash google dash maps and then forward slash api below that we want to import a few things from material ui so these are going to be app bar we also want to have a toolbar then we're going to have a typography an input base and finally a box all of this is coming from add material ui forward slash core so let's create the layout for our navigation bar instead of this h1 we're going to have the app bar like this and the position of the app bar is going to be static so we can say position is equal to static then inside of there we're going to have a toolbar that toolbar is going to have a class name equal to curly braces classes dot toolbar right now we're going to have an error saying that the classes is not defined but don't worry about that soon enough we're going to import the classes from material ui and we're going to add them inside of the toolbar we're going to have a typography that typography is going to be of a variant equal to h5 if you've never used material ui before don't worry i'm gonna lead you through the process but basically typography is simply every single text element but you can change the variant you can make it headings subtitles and titles in this case we want this pretty big so i'm going to leave it as h5 then we're also going to give it a class name equal to classes dot title inside of there we can simply say something like travel advisor below that we're gonna have a box in material ui a box is basically a div but you can simply set a display of flex and some other properties then inside of there we want to have one more typography so we can simply copy this one i copied it indented it properly and this one is going to be a variant of h6 and we're also going to leave the class name of title in this one we can simply say something like explore new places now still inside of this box but below this typography we're going to have our auto complete component it is not going to be a self-closing component so that means that we want to have something inside of it more specifically we want to have one div and that div is going to have a class name equal to classes dot search this is going to be our search bar or search box inside of that div we want to have yet another div and this div is going to have a class name equal to classes dot search icon inside of that div we can of course have our search icon so let's call it like this search icon and it is a self-closing tag of course we have to import that search icon so at the top let's do just that import search icon and this will be coming from add material ui forward slash icons not core in this case it's going to be icons finally below this inner div we want to have one more thing and that final thing is going to be called input base it is going to be a self-closing component with a few props first it's going to have a placeholder equal to search dot dot and then we're going to have some classes in this case classes is going to be equal to an object because we want to add multiple classes first we're going to set our root class to be equal to classes dot input root and then our input is going to be set to classes dot input input like this it's a bit weird of a naming but it should do us just fine great we're done with the layout but if we try to render this right now that wouldn't work because we have a lot of errors first of all our classes are not defined and it also looks like we're missing something right here at the top it says that we have to add one more forward slash and then search here is where icon is great so now we can clearly see that we are missing all of our classes so how do the classes work in material ui well remember we already have the styles.js file so inside of there we need to import some things in this case it's going to be import make styles and this will be coming from add material ui forward slash core forward slash styles below we want to export these styles so we can say export default make styles we can call this as a function and then inside of there it requires one more callback function the callback function inside returns an object so we have to wrap it in parentheses like this great finally whatever styles you want to add you can simply add them in css in js type of way that means that if you want to have a class name title you would create a title property that's going to be an object and then you can set the color to be equal to red it is kind of clumsy to write css in this way but i found it to work really really well with material ui and you get a lot of benefits this way because they also give you a theme object which allows you to use their colors paddings and everything else now this is not a css video you're here to create this phenomenal project to learn how to create logic use apis google maps and everything else that's why i don't want to waste your time by writing this css by hand so find the link in the description and there you'll be able to find all the styles for this specific project once you have them simply copy and paste them in each specific style sheet header styles have the most css but you can see it's not that a lot but then all the other component styles don't have a lot of css at all so you can simply inspect it see if you want to change something and really learn it if that's what you want with that said now we have the style sheet and finally we can go back inside of our header and we can import it so right inside of here we can say import use styles and that's going to be coming from dot slash styles great now just by looking at the name you can notice that the use tiles seems to be a hook so let's call it how we usually call hooks const classes is equal to use styles and then we call it as a function okay now that we're done with the layout and we have our styles we can simply save this and take a look in the browser but before we do that let's for now simply disable the autocomplete by commenting it out right now we don't have everything set up for it yet so if we simply save it and run it with it we're gonna get some errors but don't worry we're gonna re-add it back really soon now let's take a look in the browser as you can see this already looks much better we have our heading travel advisor and on the right side we have explore new places with this nice search bar that has a search icon now we are ready to start creating the main parts of this application which are the list and the map let's go ahead and do that right away map is of course the main part of our application so let's start with that i'm going to open up our map component and then in here we can start implementing the jsx let's first import a few things we're going to import google map react this will be coming from google dash map dash react then we're gonna import some things from material ui so we can say import we're gonna need a paper paper is basically a div with a background color we can also use typography and finally use media query use media query is going to help us with making our map more mobile responsive we are also going to need a location outlined icon so let's say import location outlined icon and this will be coming from add material ui forward slash icons and then forward slash location outlined without the icon at the end and finally we're also going to import a rating component so import rating from add material ui for slash lab some of the material ui components are still being worked on rating is one of them that's why we're not importing it from core we are importing it from forward slash lab okay and we're going to repeat the process for importing the classes as well so we can say import use styles from dot slash styles and then again you can visit the link in the description and you can simply copy and paste the styles right in here once you have the styles we can go back and we can start implementing the layout at the top we're going to call our hook which is going to be cons classes is equal to use styles and we call it as a hook then we're also going to call the use media query hook so if we can use it later on we can say const is mobile is equal to use media query and we pass in a string that string is going to have parentheses and then inside of there we can say min width is equal to 600 pixels this means that this is mobile variable is going to be set to false if the width of the device is larger than 600 pixels now that we have everything we need let's start writing our jsx we're first going to have a div that div is going to have a class name equal to classes dot map container right inside of that div we're gonna have possibly the most important component out here and that is the google map react google map react is not going to be a self-closing component so we can open it like this but we're gonna have quite a few props we want to pass to it first property is going to be bootstrap url keys and then inside of that object you can say key is equal to and now in here we can specify the google maps key to get our key we'll have to create a new project on google developers console we're going to do that as soon as we add all the other props required for this google map react the second property is going to be default center so this is going to be the center of our map and then in here we can pass the coordinates right now we don't have real coordinates so i'm going to create const coordinates is equal to that's going to be an object that's going to have the lat property and it's also going to have the lng property this is the latitude and this is the longitude and in there we're going to pass the chords below our default center we're going to have a real center so this is the current center of the map and in there we can also pass the coordinates of course this here should have been coordinates then we can also set up the default zoom default zoom in this case i found 14 to be working the best so let's leave that finally we're gonna have some margins so let me say margin is equal to and then it accepts an array it has four different properties we're going to say 50 to the top 50 on the right 50 on the bottom and 50 to the left side later on we're gonna have three more properties which we're gonna left empty for now one of these is options then we're gonna have the onchange property which is gonna be really important when you change the map and finally we are going to have the on child click property which is going to be used when you actually click on a restaurant on the map right now for this to work these must not be empty so i'm just going to put an empty string in there and this is it these are all the props that we need for our google map react now is a great time to get that key to get the api key you can go to console.cloud and then forward slash project create if you visit this link you'll be redirected to the google cloud platform and there you'll be able to create the project and get the api key of course if you're not logged in you'll have to log in first but then you should be redirected to this page now i'm going to make this a bit bigger for you and we're going to give this project a name let's call it travel advisor okay great and finally i'm gonna click create okay at the top left you should be able to select your project and you can click travel advisor to switch to it it should take just a few moments to create it then on the left side you should be able to see apis and services and you can click dashboard in here you can start searching for maps there we go maps javascript api is the one we'll be using so you can click enable it took just a second and it redirected me to this page finally you can click on maps javascript api and once you're here go to credentials on the left side once the page loads click create credentials in this case we want to create an api key and there we go our api key is right here let's copy it and in our code right here where string of key is let's paste that api key later on in the video we're going to convert all of the api keys and data that should be secure to environment variables that way we're the only ones who can access it with that said just before we save i notice there's one small error right here and that is that i miss type styles that's a rookie mistake and at the top location outline icon is supposed to be location on outlined icon same thing here at the end location on outline save this and let's take a look in the browser and there we go this app already looks like something we have the map on the right side we can even make it full screen and let's zoom out a bit looks like we're in the middle of the ocean the entire map loaded now if we zoom out that's great we have a few different routes we can go right now we can start implementing the search right now of course if we search for something like new york right now it's just a basic field but we want the functionality to fetch all of the cities streets and everything in the world we can do that or we can immediately start creating the list or we can start fetching the restaurants this is the moment where you can really choose what you want to do next in this case i think that creating the layout for the list makes sense that way most of our layout is going to be done and then we'll be able to get dirty and start working on the functionality of fetching all the restaurants hotels and attractions you already know the drill starting with the list is not going to be hard we're just going to open up our list component we're going to import a few things and then we'll be able to start creating the layout so what are we going to need from material ui in this case we can say import we're going to need a circular progress that is material ui's loading bar then we're going to have a grid a typography one input label as well as the menu item and finally a form control and a select element all of this is of course coming from add material ui for slash core in this case let's also import our styles so we can say import use styles from dot slash styles as simple as that you already know the procedure i think you even have all of the styles open in the browser right now so simply copy and paste the styles for our list there aren't many as you can see right there just some simple heights margins paddings and so on nothing you wouldn't be able to do yourself so don't worry about that now that we have the styles we of course have to do const classes is equal to use styles and with that we are ready to start using all of these components so first we're going to have a div component that div is going to have a class name equal to classes dot container below that we're going to have a typography component and that typography is going to have a variant equal to h4 inside of the typography we're going to have something like restaurants hotels and attractions around you below the typography we're going to have a form control element so let's create that form control form control is going to have a class name equal to classes dot form control inside of our form control let's create our input label our input label is simply going to say type and just below our input label we of course have to have the corresponding select element our select needs a value which we're going to leave empty for now and it also needs an unchanged property that on change is also going to be empty for now inside of that select we're going to have a menu item like this menu item and that menu item is going to have a value equal to restaurants and of course it's simply going to say the same thing restaurants so if we select this first menu item we'll get to restaurants now we can duplicate that two more times if we select the second one that's going to be hotels like this and the third one is going to be attractions and finally attractions now this data has to be modified using state so let's import use state in curly braces from react so let's create a use state hook const and then we're going to have brackets and then inside of there we can say type and set type the first thing is our state and the second thing is a function that modifies that state that is going to be equal to use state as a function and it accepts one parameter which is the first initial value that's going to be put into the variable of type so in this case let's say that the restaurants is the default value now that we have our type we can say value is equal to type right inside of this select and on change what do we want to do well on change is going to give us a callback function that has the event as the parameter and we can simply say set type is equal to event.target.value inside of the event that targeted value is where the value of the clicked element will be so if you click on hotels this thing is going to be populated with hotels and then that's going to set the variable of type we also want to copy this whole thing one more time the entire form control this part is going to stay the same the input label is simply going to say rating instead of type this time and then we have to also copy the use state one more time this time we're gonna have the rating and we're gonna have the set rating at the start our rating can be set to just an empty string so now that we have the rating instead of the value of type we're gonna have rating and instead of the set type we're gonna have the set rating at the start we're gonna have old ratings so restaurants or hotels with old ratings so we can say the value is equal to zero then just below that we're gonna have three stars so we can say above 3.0 then we're going to repeat that this one can be 4 and we're going to say above 4.0 and finally we can have a number of 4.5 and we can say above 4.5 so these are really good places great we've written a lot of code now let's look at it in the browser as you can see we now have this great heading restaurants hotels and attractions around you we can choose between restaurants hotel and attractions and we can choose the rating from all to above 3.0 4.0 and finally above 4.5 that part is ready but now is the most important part we have to start rendering through the list of restaurants and then displaying a card for each specific place so far we haven't yet fetched restaurants hotels or attractions so let's create a variable const places which is going to be a dummy variable for now in there we can simply say cons places and let's say that each place is an object and it's going to have a name property so the first one is going to have a name of something like cool place let's paste this out properly and let's create one more object the second one is going to be let's say pub and let's say best beer and finally the third one is going to be best steak let's say these are the names for our places now that we have our places just below the form control we can actually loop over them so i'm going to create a grid that grid is going to be of a type container it's going to have spacing equal to 3 and it's going to have a class name equal to classes dot list inside of there we can open a block of code and we can say places question mark dot this means only if you have places only then map over them map of course takes in a callback function like this and then in each iteration of the callback it has one new place so if we're mapping our places we can say in here place we're also going to need the index and index is always given to you as the second parameter to the map function now we need curly braces if you really want to open this as a function but in this case we only need parentheses because we're going to instantly return a piece of jsx so for each place we want to return a grid but this time not a grid container rather grid item that grid item is going to have a key equal to index this is usually not a good practice especially when you're deleting items from the list but in this case we won't be deleting them so it's fine and finally we want to say xs is equal to 12. that means from extra small devices all the way to the big devices they're gonna take the full width of the list container which is 12 spaces and finally inside of the grid is where our card should be our card is yet another component that is a custom component we need to create and that is the place details so let's import at the top the place details component let's do it like this import place details from dot dot slash place details forward slash place details to get to the component now if you scroll down instead of the card we can render the place details which is going to be a self-closing tag of course one thing we have to pass into it is going to be a place which is equal to this place right here great let's scroll a bit up and i'm just going to duplicate this two times just so we have more places to see now that this is saved let's visit our place details and remember as props we're getting our place so this is how you can get props really easily we passed it right inside of here and we're getting it right inside of here instead of place details let's render place dot name remember each place has a name so let's render it for each one once you save this let's take a look in the browser and there we go alongside the header and the select fields now we have the list at this point this list is looking kinda boring it's just headings with the names of different places like cool place best beer and best steak but that's more than we need for now our next step is to finally fetch the data for all the restaurants hotels and attractions and that way we'll have something to render out here and also to render on the map now we're finally getting our hands dirty and i think this is the part of the video where you'll be able to learn the most we'll work with the apis i'll teach you how to fetch data how to properly structure that data and how to keep it clean it's always important to keep your code clean and secure so we're gonna do that right away to fetch our data we of course have to make api calls and to keep our code tidy we're going to create a new folder inside of the source folder which is going to be called api right inside of there we can create a new file called index.js this is where we're going to keep all of our api calls inside of that file we're going to import axios from axios axios is the library that's going to help us make our calls and in here let's create a function that's going to make that api call we can say const get places data that is going to be an async function so we can say async and inside of there we are going to have a try and catch block inside of the try block we usually have a request and if that request is successful then the code runs as it's supposed to run inside of the try but if the request fails then our code is redirected to the catch error block with that said let's start by creating our first request we can say const response is equal to and then a wait and then in here we're going to make the axios dot get call now of course the main question is to which url are we going to make our api call to and that is where the rapid api comes into play you can search for travel advisor and then click on the first api that appears you'll be redirected to this page and then right here if you're using it for the first time you have to click subscribe to this api that's going to bring you to the pricing section and then choose the basic plan as you can see it is completely free up to 500 requests a month for our testing purposes that's going to be more than enough once you're done with that you can go back to our endpoints and then in here we can see what endpoints can we make we can make endpoints to locations to get the autocomplete we can also post different hotels or get hotels we can list them by latitude and longitude or we can list them by boundary there are also some more endpoints which are deprecating we also have the same thing for restaurants and for attractions so what do you say that we first make this work with restaurants there is the restaurants list by latitude and longitude api call as you can see we have the latitude and longitude and you might think this is great because we already have the coordinates that are in the center of the map and let's click test to check it out and we got back 33 restaurants based around that central location that is great but if you think about our application if we wanted to showcase everything in the center of one dot for example let's say that we go to united states and let's say that we are in kentucky if we make this a central point and if there are a lot of restaurants all of the restaurants are going to be populated in this exact point but we don't want to see the restaurants just around this central point we want to see it in our entire visible area of the map that's why we're going to use list in boundary in this case you have to pass the latitude and longitude of the bottom left corner of the map and also the top right corner latitude and longitude so we have to find the position of the bottom left corner and the position of the top right corner if we do that the restaurants that we fetch are going to be scattered across our entire map so how exactly can we make this call so that we get back this data well rapid api makes it extremely easy as you can see you can select your language right there javascript axios and you can basically just copy everything that is in here let's do just that once you copied it we're going to paste it right in here at the top and then we're going to make some small adjustments in this case i'm going to take this url and i'm going to store it in a variable we can say const url is equal to to this specific string since we're using axios the method is automatically going to be set to get so we don't have to use that now when it comes to params we definitely need the bottom left latitude and longitude and the top right latitude and longitude but we don't need any other of these options so i'm simply going to delete them for now and then we also need the headers this is where your rapid api key resides that means that we'll also have to exchange this to environment variables later on in the video this part we can delete because we already have our axios call right there so what we can do is we can use this url right here axios.geturl and then the second parameter to the url are the options so you can simply pass the options object right inside of here for now this is going to be all that we need we could return the response but we're not really interested in the response itself we're more interested in what's inside of the response and that is going to be data so we can immediately destructure the data right in here and then one more time we need to destructure the data from inside to get to our restaurants finally we can return that data right here also in the cache we're simply going to console.log the error now that we have our function we can export it by saying export const get places data the main question now is where are we going to call this function and the answer is inside of the app.js so let's go right there and then at the top let's import get places data and this is going to be imported from that is going to be dot slash api great so now the question is how can we call this function inside of our functional app component the answer is we are going to create a use effect so just at the top let's set up our use effect we have it imported and let's set it up right inside of here by saying use effect that is of course a function that accepts another callback function and don't forget at the end of the function we have to have the dependency array if you leave this dependency array empty that means that the code inside of this function block will happen only at the start of the application and right now that's exactly what we want to do so i'm going to say get places data and we're simply going to call it as a function now don't forget this function returns something more specifically it returns the restaurant's data so let's set the data to the state i'm going to create a new use state field i'm going to import use state from react as well and then we're going to create a new use state field our field is going to be called places and the setter function is going to be set places of course this is going to be equal to use state and at the start our places can simply be an empty array now that we have that you also have to remember that our get places data is an asynchronous function that means that we have to call the dot then on it i'm going to put the dot then right here and the dot then accepts a callback function which then has the data so right here we're getting that data and what do we want to do we simply want to call the set places and set the data to those places one good thing we can also do would be to cons a log data just so we can see if it's being fetched properly great this seems alright we have the function making a request of course everything is static right now we don't have real coordinates here but we're going to make this work really really soon we just first have to see if it's going to work with static coordinates if we go back to our browser we can right click click inspect and then open up our console and there we go we have seven different locations all of these are restaurants every restaurant has a lot of information like an address address object with the entire city street and country it has different awards categories different types of cuisines and a lot of different information that we can use to display on the map and on our cards that means that we are fetching the data from the api correctly this was extremely easy right rapid api makes it so easy to make api requests but now is the time that we make this dynamic we have to get real information from the position of our map and then based on that we have to call only the right restaurants for that map to do that we'll have to pass some information into this get places data function so let's create more use state fields more specifically i'm going to set a variable of coordinates and also set coordinates that is going to be equal to use state and then at the start we can leave that as an empty object we also need one more thing which is going to be cons the bounds and also set bounds remember the top right and the bottom left corner i was talking about we are going to call them bounds and we can say equal to use state and the bounds are the start going to be set to null now we have this data but it's not populated yet these are just empty values so we have to pass our setter function as props to our map we're going to pass the set coordinates prop which is going to be equal to that setter function of set coordinates and i'm going to repeat the process one more time for the set bounds also our map is going to have to use these coordinates so let's also pass the state itself coordinates is equal to coordinates now if we go to our map our map is going to be receiving different props more specifically set coordinates set bounds and also the coordinates themselves as you can see before we even declared empty coordinates but we're no longer going to need that so i'm simply going to delete it now the question is how are we going to know when the coordinates or bounds of the map change and the answer is google map react will be doing that for us we simply have to call a specific on change function inside of the onchange we are of course getting a callback function that has the event inside of it so right inside of there we can call these set coordinates and then inside of there we are going to set it to an object an object that has the latitude property which is going to be equal to e dot center dot lab and also we need the lng property which is going to be equal to e dot center dot lng but you might be wondering how do i know that this event has the center lat and everything else we're going to use well an easy answer is always console log everything that you can so i'm going to console log this event and let's check it out in the browser as you can see we are cons logging it it has the bounce property it has the center property and also the margin balance in this case we'll only need the center and the bounds for the center you can see it's lat 0 and lng 0 but then again for the bounds we're also going to use the north east and the southwest these bounds are going to be really helpful with setting our top right and bottom left corners so to do that i'm going to delete this kansa log and i'm going to call the set bounds our set bounds is also going to be an object and it's going to have the northeast bound which is going to be equal to e dot margin bounds dot northeast we're also going to have the southwest which is going to be equal to e dot marginbounds that southwest this is all that we have to do to successfully populate these variables so now if we go back inside of our app and if we console log these variables right there coordinates and the bounds what do you think the values are going to be are they actually going to change when we change the map think about it i'm going to save it and let's test it out before we check it out let's properly set these coordinates here at the start we can say the latitude is going to be zero and the longitude is also going to be zero well if we reload and open up the console you'll see there are a lot of warnings errors and stuff like that but to just get a clear view click here show console sidebar and just clic