How to setup google maps FlutterFlow

hello guys uh some people were asking me how to do google maps uh we're showing the location and so on so okay first of all we create a page a project and you have all the information about google maps api keys how to do them and everything uh and yeah you connect it with the let me show you with the firebase here and and that's it and yeah like google maps apis and on the main page on the home page what you do you just drag and drop your google maps here so our google maps is uh somewhere here right wait where is it okay up here should drag and drop it here done it's working all right so here what you need to do first of all you go to query collection you query type is gonna be query collection uh firebase query it's like whatever you call your collection i called it map and query type is list of documents um filter nothing is needed here for you done so here we did it okay uh then we click on google map again and on the like property settings marker document is gonna be our map records from google map for example if i remove it i click here and i click map records from google map cool and initial location the current user location good good okay if we go to collections we see that we have a name of the of the item and location in led and long data type type so uh here we did everything we go to actions and the actions what i did i created a bottom sheet so let me show you my bottom sheet so here's the bottom sheet and let me choose the primary text let it be black this one i'm gonna show you right now let's make it this one cool it's gonna be funny elevation two okay so what we do uh so we drag and drop container inside the container we drag and drop column and the text field so in for the container what we do uh first of all wait uh we have a container but we click on the empty space here we have parameters so create a parameter location data type type is going to be record and record type is going to be your collection for map the map collection and save it we go to collection in the collection we choose the query type document from reference get document from reference collection map source location is our parameter and available option is reference done and for the text i choose a map record from container and name save so now we go back to the map and the map on the action on marker tab for example i just click here we have a uh what we call a bottom sheet okay we need to call bottom sheet where's the bottom sheet uh yep this on bottom sheet display com component location info height let's let's just be like 300 this one let me make it transparent and this one is also transparent uh parameters we send the parameter location the one we created in the component and source gonna be marker record done close and that's it ah yeah so mark your documents gonna be my breakers from google map and its location the current initial location global properties current user location save it and now yeah and here let me show you how to use this one so we go to the firestore manage content let it load okay so here you see i have two locations let's add one more location name is gonna be london and we click here and we write london london entire canada like uk done safe sometimes it shows like let's see if we choose for some moscow there are some bugs it has and i want to show it to you how to solve it no bugs okay sometimes you will see here like a lot of nines right sometimes it shows like this so what you do you delete all the nines and add document done and now we can go yes by the way here everything explained very quickly so i checked it out here how to use it i mean i did use before but i forgot how to so i checked it out here please use also docs.flutterflow.io more information because sometimes i don't have a lot of time to create videos and today i got some free time so that's why i'm creating it yeah and now we can run it now we wait okay so now we see that okay this is it shows my location but it doesn't show the pin uh so if we decrease it zoom out so now we have like london we have berlin we have moscow we have north sultan done so good luck enjoy it if you have questions something like oh dude can you show me how to make a way so i can like build a path from point a to point b um i don't think this is like possible for now but maybe in the future they'll will be able to do so but right now unfortunately no yeah please uh like it like the video comment it say how cool it was and yeah if you have any questions just write it down i'm gonna try to answer it as soon as possible bye bye

Channel: WeLoveFlutterFlow

Views: 14,546

Keywords: Flutterflow, Flutterflow tutorial, Google maps flutterflow, How to add goodle maps in flutterflow, How to setup google maps FlutterFlow, No code low code, Nocode tutorial for beginners, We love flutterflow, Wlff, flutterflow, flutterflow app builder, flutterflow tutorial, flutterflow for beginners 2022, nocode tutorial for beginners 2022, flutter flow, no code, Flutterflow googlemaps, flutterflow training, flutter flow tutorial, software developer, low code, no code app builder

Id: PtaG_KSRic8

Length: 8min 51sec (531 seconds)

Published: Mon Apr 25 2022