FlutterFlow | Google Maps Search and Nearby Places

hey guys today I want to show you how to integrate Google Places API in particular the nearby maps API into your flutterfo app so firstly we're going to create a new project let's call it new places and next we'll connect it into our Firebase so we'll go to Firebase and then we're going to create a new project here by places once the project has been created we'll copy the ID the project ID into flutter flow here you'll throw error saying it's not an editor we'll just copy this email go back to Firebase go to users and permission and then add flutter flow as editor and then connect so we'll just create a landing page a home page let's call it Maps page next we'll need to obtain the API keys so go to Google console and create a new project after the project has been created we will go to API and services enable API and here we'll need to enable four main apis the apis we need is the maps SDK for Android iOS and JavaScript in addition to the nearby places API which is called places API so we can just click into each individual one and then press the enable button now that we have it all enabled as you can see here we'll need to obtain the API key so go to keys and credential most of the time the API keys are created on enablement however it doesn't seem to be the case we need to copy these API Keys into flutter flow so let's create these Keys manually so here I've created those API keys and we'll copy them into flood flow so you go to settings you go to Google Maps and then it needs Android iOS and web key now that's done let's build the maps and the search button so I'm going to go add a Google map and then we can change the lat long to the current device location and then what I'll do next is really add the places picker this is where it allows the user to select a specific location I'll now add a search icon so when the user click search it will actually take those value from this selected location and input it into the API Let's test this action now first by re-centering Google Maps based on the selected location so you can add action and then we go to Google Maps and then we'll recenter the map based on the places Pickers lat long Let's test this out foreign Australia and the maps automatically re-centers to cine next we'll need to bring in the nearby searches so you can go to developers.google.com to read the documentation um it's quite extensive so here we need some required parameters such as location and radius location being long radius is being in meters have fiber search now let's jump back to flower pro to create the API call so you can add a API call and the it's going to be a get request where our get request is going to be that all right example where is provided by Google so paste this into the API URL and we just call this in the UI places so we need to feed a set of parameter into it but the first thing we need to do is create that variable this will basically allow the user to input any location they want to search for and then next we'll add a set of parameters which is required sort of first being the API key which is defined as a string and that you can obtain from your Google Maps platform next we also need a required variable called radius we're going to set it to 2000 meters and then lastly let's just narrow down our searches to type restaurants finally we also need the location so this is going to be leveraging our variable that we've created so let's test the API call it seems to be perfectly working great so what's really great about flutter flow is that there is a recommended Json path to help you pass the response um simplicity's like I believe we'll just need the lat long in order to create the pins and how about we just also include the name of the business let's jump back to our budget Builder so what we want to achieve here is that a user can select a location and when they press the search icon it would output the nearby restaurants based on the selected location so what we need to do is create an action for the search that course API so here we'll create a new action it's going to be API call and it's going to be the newly created API call we just created and the variable we need to feed in is a set of lat long to search for one thing I'd like to note is that the lat long that we need to search for in the API call is of type string however flutter flows that long in places picker is a type lap log so we need to create a custom function so let's call this custom function lab longitude string and we're going to have it that long as it argument that we want to convert to string so we can go to code palette to help us write the code which is right simple simply return input location as string and this will give you a set of code now we save the function and then input the places picker that long into this custom function for the API call we'll add the output variable it's called nearby places results now how do we display these set of results as markers on the map so we Select Market as multiple type let long what's also a bit of problematic here is that as you can see the results is of type double however flutter flow needs a list of type lat long so what we need to do here is also create a custom function to convert this list of doubles into list of lat longs so here we'll just create a new custom function where the output is a list of lat long and arguments are a list of latitudes and a list of longitudes and similarly we'll use copilot to help us write the code return that long combined this looks about right and copy the function save it and as always check for error no errors that's great now we'll leverage this custom function to create our list of that longs so select the custom function action output need by places result now I'm going to select the lab latitude Json path in addition to the longitude Json path based on Now actions output from the previous API call we created now let's test this out and see if it works great we're going to search 200 barangaroo Sydney and press the search button and here you see the list of restaurants that are within 2000 meter radius of Tau 2 of 200 barangaroo Sydney in the next video I'll show you how to click onto each individual marker and go to a detailed page so you can show hours or reviews I hope this tutorial helped you understand how to use flutter flow and Google Maps together in addition leveraging the Google Places API remember to comment like or subscribe for more content on Florida

Channel: Steven Liu

Views: 14,070

Keywords:

Id: 29Oz0LI8j68

Length: 10min 2sec (602 seconds)

Published: Thu Aug 24 2023