How To Use Google Maps In FlutterFlow | FlutterFlow Tutorial

hey folks today i'm going to show you how to add google maps to your flutterflow project so first you'll need to go to the google maps platform page inside of the google cloud platform here you'll need to enable three services one for android one for ios and the last for web so let's add the sdk for android it's as simple as going here and clicking enable next we'll add the web api and finally ios next we'll need to add the api keys in flutterflow so if you've already configured firebase for flutterflow you should already have three api keys ready to be configured if not you can always go here to create credentials so first let's copy the android key we'll go to the settings tab all the way to the bottom and paste in the android key here next we'll do the same for ios and finally for web now that we've done that i'll show you how to add the google maps widget into your projects so just drag and drop from the widget panel into the page and at this point now you have several different options to configure your map so you can set the initial location either by hand or from a variable and there's a lot of other different configurations you can add as well some of these will not show up on flutter web but will for android and ios you can change the map type as well terrain road map hybrid and satellite as well as the style so this is kind of the theme so we can see knight for example pretty cool now let's see how to configure markers so by default it won't show any markers you can configure it to show a single marker that you can set from a variable now when you set from a variable it needs to be a some sort of record some sort of firebase document for now we'll create a cities record and we'll call it city why not so all we need to do is set it as we set other variables and it's as easy as that next we can configure the map to show multiple markers and similarly we can set this from a result that returns a list of markers so for example an algolia search result that returns a collection or like a list of markers now the one caveat here is that your cities collection whatever collection it comes from needs to have a lat long type so that the map can know where to place these markers in addition you can configure actions for each of the markers on marker tab so in this case we might want to when a marker is tapped maybe we want to show a bottom sheet now we'll just select what sheet we want and this sheet takes in a city record and we can set it to the marker record itself so marker record is it automatically knows that this means the marker that you're tapping on and it's as simple as that google maps is configured in your project thanks for watching and enjoy see you next time you

Channel: FlutterFlow

Views: 48,451

Keywords:

Id: vP-YMLRM4xc

Length: 5min 4sec (304 seconds)

Published: Wed Jun 30 2021