Build MODERN Map Apps with FlutterFlow: Comprehensive NoCode Tutorial

here's a trick question when was the last time used the nap without Maps Airbnb Uber lyt globo and countless other apps use some kind of a mapping feature to show location of yourself give you directions or help you understand the world around you and so in today's comprehensive no call tutorial you're going to learn how to leverage maps in your apps we're going to be covering simple use cases and we're going to be slowly moving towards more complex ones and covering everything in between now before we get started as always all the apps and all the resources that I discuss on this channel can be viewed and or cloned via our amazing patreon community and if you're still not a member then you're greatly missing out check it out using the first link in the description below the video now the first thing that I want to show you is how to set up and configure your Maps Okay so as you can see I have here a map widget this is actually Google Maps and and we are centered on New York City here and I also have some markers here on various points and various landmarks now what's cool about this here is that I can zoom out I can zoom in I can drag and drop I can go pretty much anywhere I want it's a very very uh flexible map widget you can also do a lot of other things as we're going to be covering a little bit later in the video and so if I jump back into my Builder this is the widget here now if you click over here and you search for maps you're going to actually see a couple of widgets so you have this Google Maps or Google Map as the case may be here and you also have this static map now I just recommend using Google Maps it's you know one of the most popular products out there everybody knows it's very very powerful you can do a lot of amazing things with it as you're going to be seeing a little bit later in the video so if you select this here you're going to have this widget here that you can configure now before you start to configure this widget there's one important thing that you need to do and if you choose Maps here and you select you go into app settings Google Maps you need to enter your API key okay and so where do you get this API Key Well if you go over to Google cloud and assuming you already have a project created right because if you're using Google Cloud everything works in terms of projects right you you arrange your API you arrange your resources in terms of projects right so as you can see I have a project here selected I actually have several projects but this is the project that I'm using right now and so what you want to do is you want to go into API Services right here and then you want to go into library right and then you want to find maps so as you can see I have Maps SDK for Android here I have for iOS and here I have a JavaScript API and so you want to make sure all of these are turned on and enabled you can see it says here API enable enabled manage if you do not have this enabled you're going to see a button that says something like enable that you need to click on and now it's enabl so I have all of these enabled because you know if you're going to be building an app assuming it's going to be crossplatform for iOS Android as well as maybe the web you want to make sure that it works on all of these platforms and the next thing that you want to do is you want to go into credentials here okay and this is where you can create your API keys that your apps are going to be using and as you can see I already have my keys now if you do not have your keys yet you can just click on create credentials and you want to click on this API key okay I'm not going to do that because I already have my keys here and once you do that you're going to have a new key you can simply click on show key and now you have this key you just want to copy this and then you want to jump back into your flut oflow app builder and paste the key uh in all of these fields now the next thing that you want to do is you want to configure your widget now when you are viewing your widget inside of this app builder you're going to be seeing this message you can ignore this message you're only going to be seeing this message in the app builder you're not going to be seeing this message when your app is running okay so what you want to do is you want to insert this widget click here and on the right hand side you can configure various things so things like the number of markers and here you can select none single or multiple you can also select a marker type and this is going to be either a document or lat long now a document means a Firebase firestore document okay if you're not going to be using firestore as your back end you want to be selecting lat long and pretty much in most cases you just want to work with lat Longs directly unless you're building an app that uses you know fire store as the back end in that case um in your document you're going to have a latl long field which is what this setting is going to be working with okay but we're going to be using latlong here and here we have our initial markers right so this is a an actually a list of lat Longs that I have configured in my app state so that we can show a list of initial markers here and then you have a bunch of other settings so like a marker icon you can select an image you can do default marker color here you can select the color the map type we're just using this uh default road map map style standard etc etc and here you can specify the initial map Center and right here we're using coordinates for NYC so depending on what you're building your app for you may want to Center your map at a specific point okay you can also do uh an initial map zoom and you also have a bunch of the settings I did not touch these I just left them on default you may have to you know tweak them depending on you know what kind of app that you're building and what kind of options you want your users to take advantage okay so once you set this up you're going to be seeing this right here now this by itself doesn't really give you anything it's a static map it doesn't really provide any kind of a user experience you have static points I mean it could be useful in situations where you just want to you know display play a bunch of points for the user and leave it at that but the next thing that I want to show you is a new feature that you can Implement uh for your map based apps and this is a feature that allows the user to type in an address and have the system automatically find the address so let's say I want to find this Museum of ice cream right here well if I type Museum I will start having these um aut completes okay so as you can see I have Museum of the Bible in Washington DC I have Museum of the American Indian museum of ice screen right here and if I keep typing uh I'm going to narrow down my choices and right here I can just select it and that's it and now I have a fully autocom completed field okay I can do something else let's say I'm looking for this color factory right I type color I start typing Factory and I see my option right we have this color factory in New York color factory in Chicago color factory in Houston Texas okay so I can select this color factory and we have it right there so this is a great great feature that you're probably are going to be using 99% of the time okay this is an amazing feature because it lets the user search for something and have it create order complete now how exactly is this accompl lished well if we jump to the second page here we have this input address here and I'm actually using this feature in my latest complex app which you can see link right there and so this thing here right if we select this input address go into actions right here we can open this up and here we only have one action and this is where we are setting page State okay we want to know what the user is typing and as the user changes what they're typing whether they're you know trying to finish something or they go back they want to change something we need to set a page state that essentially sets the scene for what we're about to do next and what exactly are we going to do next well if you notice here this input address has a backend meaning that it's getting data somewhere and if you hover over you're going to see that this is an API call okay meaning that this input as address is pulling data via an API call and it has access to that data that it's pulling and only this you know this widget here has access to the data and what exactly are we doing well if you click here you're going to see that we have two API calls but the one in question the one that we're talking about right now is this one right here get address okay and this is an API that's actually part of the Google order complete Library okay this is actually part of the Google Places API right so if you come over here you can actually search for places API and you're going to find it right here so this is this new places API and if you click over here you can kind of learn more about it okay so here it says next generation of the places API with access to more than 200 million places and if you click on the documentation you can kind of learn more about it right so if you click doc documentation here we have this places API and depending on for what platform that you're building it you can click here so for instance let's say you're doing just a you know a raw API as what we're doing right now you can simply click here and you're going to have full documentation okay for this place's API and this is a very very powerful API because it allows you to find an actual place just by typing it right because a place is a lot more complex than you know just typing it right you have the city you have the state you have the street you also have the coordinates you have lots and lots of information and this API helps you get there right and so if we jump back to our app builder here right what we have here is we have a bunch of query parameters right we have the language that is fixed which is English us we have the key which is also fixed and here we have the input which is going to be dynamic and that is why we have it set from a variable and so if we do respond and test you can enter an input so let's say I put uh 35 colums Avenue which is a street in Miami Beach and I do test API you're going to be getting uh a bunch of prediction which are another word for results right search results and so here we have 35 Collins Avenue Spring Valley New York here we have another Collins Avenue in Baltimore here we have another in Port monan uh New Jersey we have lots and lots of colins Avenue and so depending on you which one we're looking for we can display these uh choices and options to the user and have them select what they're looking for and along with this result here there's lots of you know lots of metadata lots of data behind the scenes and so we have things like you know Collins Avenue right the street we have the city we have the state we have the country etc etc and one of the most important things that we have here is the place ID or for the reference and this here is a specific ID that you can get even more information using a different API and so if we jump back in here you can see that we are feeding it via an API and if we come over here you can see that we have this get address and if we edit it the input is simply this input right here and so as the user is typing we're changing our page State and once we change the page State remember with State you can order automatically rebuild the page and that automatically refetch that API call it restarts that API call and we get new data and as a result we have this really nice flow and so if I Ty up Collins Avenue here you're going to see these results right Spring Valley Baltimore New Jersey Bloomfield let's say I'm looking for Baltimore I can simply click here and we are displaying this field here as the result so a very very powerful feature that is provided to you thanks to Google's places API okay but by itself it doesn't really do anything right I mean it's it lets the user select you know the address the place the city anything that they're looking for but that's about it right we need to do more okay and so in this next example we're going to be getting the exact coordinates from the address that the user has filled in as the result of using the that order complete now let's say I'm looking to do something in Miami so let's say I start typing Miami Beach here and here I see the first result Miami Beach so if I click it I automatically get redirected the map is automatically centered in Miami beach but not only that we also get the all important coordinates here right because coordinates are the key if you do not have the coordinates you really cannot find the place it's all about the coordinates and so as a result thanks to these coordinates we know where to Center the map and that is this point right here in Miami Beach and so I can type something else let's say I am you know looking for information about Los Angeles here we have Los Angeles International Airport I select it and we are automatically redirected to Los Angeles International Airport thanks to these coordinates that we were able to automatically look up from what the user typed in here so if I type let's say Hawaii let's say I type Hawaii Hawaii USA selected and we're somewhere in Hawaii okay so if I zoom out we should be somewhere on the tropical island of Hawaii and as you can see these are the Hawaiian Islands right here and Hawaii happen to have this coordinate here and so not not only are we showing these order complete but we're also doing the most important thing that we need to do and that is to get the coordinates so that we can work with the map and how exactly is this done well if we jump back to our Builder right here we have the same thing we have this input address here but now we have an extra step and so with the field selected if I come over here and I open the action flow editor we are doing a couple of other things so we have this unchange event and this is when the user is typing stuff and instead of doing this call as part of the widget as was the case previously we are now doing it on the unchange event and the reason we need to do it as part of this flow is something that you're going to see in just a second so right here we are doing this API call right inside the action flow we are seeing what's Happening Here now if we have succeeded and we have gotten the data we need to save the addresses that we are getting so the user is seeing the addresses as part of the aut complete but we need to save this information in the back end but not only that we also need to save the all important Place IDs and why do we need to save the addresses and the place IDs well you're going to see this right here because if you're go to focus change this is where a lot of the magic happens okay so in Focus change meaning that when the field loses Focus because when we click on one of the aut complete options once we click the field loses focus at this point this API is called and this is where we need to look up the coordinates after the users selected their choice so after the user pick the address that they're looking for we need to look up the coordinates and so what we're doing here here is we have a second API call to this get reference okay and I'm going to show you this call in just a second and because we've saved the addresses before and we've saved the place IDs as a result of the previous call we can send that chosen address and get the ID the index in that list of the data right because we're getting a lot of data but we are only displaying the actual address we're not displaying the reference ID and that is why we need to save it and based on what the user chose we need to look up that reference ID that all important Place ID and this is exactly what we're doing right we're looking up the index here and we have this cust the code expression that gets us back the index right we have the list of addresses we have the address that they selected and we're using this function called index off to get us the index right and once we have the index we can simply pass pass it to the place IDs and we'll be able to get the place ID and this is exactly what we're doing here we're essentially sending in that place to that second API call and we are going to be getting this place ID now we're not done just yet we also need to get the coordinates right so when we send that place ID we get back the coordinates and we have another custom function that essentially creates a lat laun object which is the object that contains the coordinates right we can't be passing around just two numbers around two doubles around which is what coordinates are we need to create this object and we have this custom function that all we are doing is we are passing a lat long and it returns this all important lat long object here and where are we getting these lat lungs well we're getting it from this API call so we have this Json body we have a predefined path lat and we also have a predefined path along and so if you if I jump back to this API we have the second API call and here it's expecting a place ID right so I have a sample Place ID here if I do a test API call we are getting some information right so this is actually a city in Spain right as you can see right here and we're getting all of this information but most importantly we're getting this lat long here okay and this is exactly what we need because a place an address it doesn't really mean much to us in the context of maps without the ltitude and longitude right so if I scroll down I have these Json paths that that capture a lat and a long and so once we have a lat and long I have that custom function that returns a object that you know is used all over the place in flut oflow right flutter flow expects that long long so if you jump back back here and you come over here we need this slot long because we use it as a location right so if you jump back here open the sub on Focus change we are setting this location because the objective here is to have the user uh enter an address and we need to Center the map on that location and we also need to display it here for debugging purposes just to see if it's working and that is exactly what's happening right if I type an address let's say I type Spain as an example here and I select Spain it's going to get the lat long and it's going to center it somewhere in Spain probably in Madrid somewhere if I had to guess right so if we zoom out and here you see Madrid and we can keep zooming out and you're going to see a map of Spain right here and all of this here is thanks to the second API call get reference and this flow right here now this is great and but wouldn't it be cool to have the ability to enter a bunch of addresses and have their exact locations show up in the map and so here I have a map of Manhattan and let's say I am looking for more information about Chelsea Market right here right so I'm going to type Chelsea Chelsea Market and I'm going to select it and now we have a marker right where Chelsea Market is okay let's say I'm also interested Ed in visiting the Empire State Building I'm going to type Empire here I'm going to type Empire State Building I'm going to select it and now we have a marker on Empire State Building and last but not least I also want to check out the tenement Museum okay so you know I've been thinking for a while of checking it out so I'm going to type tenement and here I have tenement Museum and now I have a marker okay so now I've entered three locations and I'm seeing a map and I have this map with the markers set in those three location so how is this done well if we jump back to our app builder go into this fourth demo here we have these three fields that do pretty much the same thing as in the previous demo so if we click on one of these fields open it up we have unchange and unfocus change and remember unchange is responsible for order complete onfocus change is responsible for what happens when you select it for things afterwards for the actual magic and so here we have this onchange it's pretty much the same thing we are connecting to this API we're updating we're getting the addresses we're getting the place ID and most importantly I forgot to mention it is that we're actually displaying the data so with this field selected here we have this aut complete enabled and for the aut complete proper we are displaying the addresses that we're getting from the API call so I know many of you are going to be wondering how we have it set up and we're simply displaying the addresses that are stored in the app state that we save it there after the API call so we save it in the App State and then we're displaying it here okay and so it's the exact same thing as before but the real magic happens in the second flow right so if we go to focus change here what we're doing here is we're doing the second API call where we are sending in the Andro that the user picked getting the ID and then looking up the place ID based on that index and here what we're doing is we're setting the location as before but we're also doing a couple of other things we are adding this new location to this markers list and this is actually an appstate variable and so if you jump over to App State you can see that we have these markers here right we have these markers that store the markers that we want to display on the map and if we jump uh to our map over here you can see that we are displaying the markers here right these are the markers that are going to be shown when the page loads when the app loads they may not be you know markers initial markers set and as a result you're not seeing any markers because this list is empty but as the user is typing things we have that unchanged then we have the on Focus change and in the on Focus change we're adding that newly looked up address that those cordinates in this list of markers here and that is why you're seeing these new markers automatically show up on this map right here so this is the kind of flow that you can use when it comes to actually showing the markers as the user is looking something up or they're you know making a list of places to visit Etc Etc this is something that you can do right here now the stuff that I've shown you so far is very very actionable right you can take the things that I talked about and start to implement these features these flows these functionalities in your own apps because after all many of the consumer apps that we're going to be building is going to be using Maps one way or another so you can definitely you put some of these features and functionalities to use but in this next demo I want to show you something really really cool that you can do in your apps if you're looking to do something like real time user tracking realtime order tracking uh etc etc you're going to find this very very helpful and to show you this functionality I'm actually going to download this app right here on my computer and run it in a simulator because after all that is exactly what your apps are going to be running they're either going to be running in a simulator or in a real device okay and so what I'm going to do here is I'm going to click here and I'm going to copy this thing right here then I'm going to jump into my terminal and paste this command and what's that going to do it's going to download this entire app code base and save it on my computer so I already did that next I'm going to click here and I'm going to launch one of my simulators here it's launching right now next I'm going to go over here and run my app app and I'm going to wait for my app to load and now I have my app up and running in a real Android simulator so we still have all of these things but if I click on this fifth demo I want to show you something really really cool so what's happening here is we have two points here right we have the point here and we have the point here and it's emulating the movement of a courier from this point to this point and here we have time left and we're showing distance left which are actual real time calculations okay so this is how long it's going to take to cover this distance right so from midt manhatt to Upper West Side and as you can see we also have the path this is thanks to Google's directions API and we have this marker here that kind of resembles a car moving along this path so as you can see now it says 20 minutes distance left 2.9 9 now it's 19 minutes and it's going to be updating in real time as the simulation is working as this uh Point here is moving to its destination here now how is this implemented well if we jump back into flut oflow and we go into page five here I'm using a custom widget so if you click here I have here a custom widget called custom Google Maps and this this custom widget is using this Library here called Google Maps widget okay and so you can simply Google for it you can head over to pop. deev and you can search for this but in a nutshell this is a flutter package which can be used to make poly lines from a source to destination and also handle a driver's realtime location on the map so this is going to be very very useful for all kinds of apps that need to show th a movement of something to somewhere right so maybe a a car to a destination maybe a delivery person to a destination etc etc and you can see some of the screenshots here and this widget is completely customizable okay so it gives you a call back option basically it can spit out and notify you as the time is changing right you give it two coordinates and it's going to tell you the time it's going to calculate the time but not only that it's also going to calculate the distance but most importantly it's going to give you a call back that you can use in your custom Uh custom Widgets or custom actions if you want to notify your app as the data is changing right so I have this custom widget configured with a distance callback and a Time callback and these callbacks have a you know one parameter which is you know in this case this is a distance in this case this is a Time both are just strings just to make things simpler and if I scroll down I'm setting up my source uh lat long my source coordinates and my destination coordinates obviously if you're building a production app you're not going to be hardcoding these These are going to be passed as parameters and if we scroll down here I have a simulation that's simulating a point moving but most importantly we have these two callbacks right total time callback takes a night time and total distance call back back takes an a distance and we are calling these callbacks that I've defined on you know in this uh on this flutter flow level and these callbacks will call our own callbacks as time or distance is changing and so what's cool about it now I can select this widget scroll down and I have these distance callbacks and time callbacks so if you open it up the only thing that we're doing is we're updating a page State variable with the new value that we were that we were notified with so here we are updating our distance and here we are updating our time and we're setting our time and then we're displaying time here and distance here and as a result you have this kind of really really cool flow so now it time left is only 13 minutes remember it was like 20 or 25 minutes before distance left is 2 miles and it's moving along the path and so this delivery person is in Upper West Side already they're almost there 13 minutes away 2 miles away they're going to be arriving soon and this is done thanks to these callbacks and Page State variables here as well and so this demo here showcases functionality that you can use in more realtime apps in apps where you need to show real time location uh in the context of a source and a destination so somebody that's you know delivering something from a restaurant to your to your house house or maybe you you hailed a taxi a cab or like an Uber or like an lift or something like that and you're seeing it moving to your destination right this is going to be perfect for that now I've talked about lots and lots of things in today's video but really the best way to learn is by having access to this app right here basically by viewing and or cloning the app and you'll be able to do just that when you join our amazing rap growing patreon Community because when you join our amazing Community you're going to get access to not only the Sab you're going to get access to all the apps which means you can view Andor clone all my apps you're also going to get access to some extra content things such as q&as behind the scenes our patreon supported master class and in fact I'm going to be doing another Master Class shortly and for those who are not aware a patreon master class is a deep dive tutorial that I do from time to time on topics that our audience votes on and so if you're interested in getting access to comprehensive noot tutorials tutorials that are not going to be available on the YouTube channel you're going to find them inside of our patreon community and above all that when you join our amazing patreon Community you're going to be supporting this Channel and supporting my work and that is greatly greatly appreciated and so if you want to clone this app if you want to clone any of the other apps if you've gotten value on this channel if you want more value then you you should definitely check out the first link in the description below and join our amazing rapidly growing patreon community

Channel: James NoCode

Views: 4,826

Keywords: flutterflow google maps, flutterflow maps, nocode maps

Id: NHR0SoOJeYA

Length: 33min 6sec (1986 seconds)

Published: Thu May 02 2024