Flutter | Integrate simple Google Map | Proglabs

hello guys my name is junair khan and welcome to my channel this is the first video of the new series in which i will tell you that how you can work with google maps in your flutter application so in this video i'm going to show you that how you can work hard you can integrate a simple google map in your fertile applicator application sorry so i just installed my my application in my mobile phone so by clicking this button as you can see that a simple google map is integrated okay and once you click to this to the lake button it will take you to that specific latitude and longitude which you passed in a variable so in this video i will show you that how you can do this so without wasting time let's start by creating a new flutter application [Music] i need to specify the path okay now after that we need to click finish and once the process is completed it will show us the window so our project is being created our project is created successfully now we need to integrate a library for google maps in flutter so let me search for it pub.dev google maps flutter this one copy this and go to this one and here we need to write in a pub spect.tml file pubchet it will import the like it will import the package after this we need to open our lib folder and create a new package for [Music] saving our for creating our different screens screens and there we will create a new dart file simple simple map screen just write stf and it will show you a shortcut for stateful widget click enter simple map screen alt enter import material and like this now we need to open our main.dart file and we need to remove our unused code from this i don't need these two i will remove it i will remove this as well i will change the title of this flutter google maps and here i need to create a new file so i can show the buttons for navigating to different screens home screen stf home screen press alt enter import material and like this now we need to create a button so we can navigate to the our simple map screen for this we need we will use scaffold abbar title cons text flutter google maps like this center title true so our title should appear in the center of the app bar body sized box width media query dot off dot size dot width child column because we need to show four different types of buttons in in my next video so that's why i'm using columns so they can appear in the vertical uh main children elevated button for now i'm keeping the on press function empty text text simple map alt enter const modifier and here we need to add navigator so we can navigate to our simple map screen navigator dot off context push here we need to define our material page route material page route and in the builder build context context return const simple map screen and that's it and semicolon here as well okay so uh this screen will show us that there is a button so we can navigate to our simple map screen and on this simple map screen we will show the map so first of all let me do some changes in the main screen so it will navigate to us at home screen so home screen add const modifier okay that's it now simple map screen now we will start working on simple map screen so here first i need to create a controller for controlling the google map final completer google map controller controller and completer like this we will pass this controller to our google maps so we can control the google map from anywhere we don't need to pass every time or access the google map so by using this controller we can navigate the camera position to any point if we want after this we need to create a initial position static const camera position initial position and camera position target here we have to pass our latitude and longitude at led lng you can pass whatever you want 37.1457 and longitude will be minus 122 point like this okay and you can also pass the zoom value here 14.0 this is an initial position after this we need to create uh our target position which we have to um show once we click the floating button floating action button camera position again target position i will just copy this and we will change the latitude and longitude just move a little bit 33 and minus 135 zoom value will be same okay you can pass other two values as well bearing 192 point zero and tilt if you want to show a tilt in the camera 60. like this so as you can see that our controller is created our initial position uh variable is created our target position variable is created created so now we have to show our google map in our build function so again we need to use scaffold abba title simple google map center title true sorry text like this now we need to use our google map initial position just copy this and paste it here controller map type map type dot normal but as you can see that we can use different types of maps hybrid satellite normal none terrain so right now i'm using normal and we need to pass on map created here we can use our controller google map controller controller we will pass the value of our we will use this value and pass it to our controller okay but as you can see that we have we are having a problem while passing the value from this controller to our controller because it's final so we can just remove the final keyword and check or we can do a different method controller dot complete controller like this make it final again like this now we need to create our floating action button it is ending here floating action button floating action button dot extended i'm using extended because we can use uh much more functions if we use extended version of our floating floating button so for label text to the lake and for the icon i can i can start direction boat like this okay so everything is created perfectly but now we need to uh go to our target position once the floating floating action button is clicked so for this we need to create a function here future void go to lake like this final google map controller controller again again we will use the controller dot future so it will pass the value to us once the map is completed once the map is totally created then it will save the value of this controller to this controller and we will we are using like this that once the value is completed completely saved in our controller then you can assign this otherwise you can wait for it async like this and controller controller dot animate camera and for this we need to use this target position camera update dot new camera position and pass this value target position here like this simply totally simply like this we can integrate our google maps so let me show you that uh what we developed so far i am installing the application my real device so keep in mind that if you are working with google maps so try to use real device because many of the features might not be compatible with your emulator or simulator so it's better if you use a real device for testing the google maps it will take some time to install the application in my device because it's running first time so that's why so as you can see when i was trying to install the application in my device then it was showing me an error that minimum sdk version is required is 20 but your minimum sdk version is 16 so i'm i will just update it by opening the android folder gradle build.gradle in the app src sorry app and in the app folder you can find a build.gradle file just increase this minimum sdk version to 20 and try to and we will try to reinstall our app in our device so the app is installed in our mobile successfully let me show it to you see once you click on simple map it will take you to the simple google map but we are facing an error i think so i need to pass the api key here so let me check okay so as you can see the error is api key not found check that metadata this this this one is value must be found in your android manifest.xml file so you need to open this src folder in the android folder then you need to open the main and after that we nee you need to open android manifest.xml file like this and here you need to pass your metadata and your ap api key value like this you need to pass this line metadata android name com.google.android.jio.api key and the value must be here your api key here okay so once you pass this value and try to reinstall your try to run your app again then it will automatically show the map show the google map in your flooded application so i passed the value of my api key in [Music] android.androidmanifest.xml file and i'm trying to run my app again performing hot restart and let me click on this still it's not loading so it means that i need to uninstall up my app and reinstall the app again so i uh and reinstall the app in my device once you click on it now you can see you can you are seeing a google map but i might i might think so that i passed um different types of latitude and longitude which which which is pointing me to a c let me zoom out but as you can see that google map is integrated perfectly so let me pass a different value in in my latitude and longitude in the initial value of this so let me check what we can pass and [Music] this one let me check i tried to now you can see that we are pointing to some area now we need to change the values of these as well so it can point me to the lake that's hot restart and click simple google map and now we will click on the button to the link oh one thing i missed that i haven't called a function here go to lake let's save it now you can see it's pointing me to the lake or anything the point we passed so by following this tutorial you can easily integrate your google map in your flutter application so in the next video i will teach you that how you can get the current location of the user and show it on the google map so till then take care goodbye

Channel: Proglabs Official

Views: 13,856

Keywords: proglabs, android tutorials, .net tutorials, unity tutorials, beginners tutorials, flutter, flutter tutorial for beginners, flutter app development, flutter google maps, flutter google map integration, google map, simple google map, how to integrate google map in flutter, how to install google map in flutter, google maps api, google developer account, beginner google map, flutter tutorial

Id: 15alBbc53gs

Length: 20min 44sec (1244 seconds)

Published: Thu Feb 17 2022