#Google' Flutter Tutorial - Google Maps (coderzheaven.com)

hello and welcome back to on the flutter tutorial in this video I will be showing how to use Google Maps in flutter so this is a demo app that we are going to build where we will have the Google Maps and three buttons the first button will toggle the map type the second button will add a marker the third button will take the user to a new camera position and on tapping the marker we will show a info window with the title and a snippet so let's start so the first thing you have to do is to add the Google Maps flutter library in the pub spec toriyama file I will be providing the link in the description now I am going to close this file and go back to our main file to add Google Maps to a project we need a API keys for both Android and iOS so we need to get it from Google platform cloud console for Android and iOS for that you can follow this link and there are instructions on how to do it so the first thing you have to do is go to Google cloud platform console and get an API key you have to create or select a project and set up a billing account you can set up a free trial account they won't charge you after that so once you have done that you need to copy this metadata and provide your API key in the androidmanifest.xml file so let's do that I am opening the androidmanifest.xml file so inside the application tag I have already added it so that's my API key make sure these inside the application tag all right so I'm going to close that and so we have done add key to manifest so the next thing is for iOS so you can follow this link I will be probably yelling at the description so for iOS project we need to do a little bit more setup so I am going back to our project and opening the iOS folder and locate the Xcode workspace file so I am going to open it in the hex code and let's see the instructions and I'm going to the Google Apps flutter plugin and we have done that for Android now for iOS you need to find the app delegate file and add the key there so let's go back to Xcode and find the hab delegate file okay I'm opening a bill gadot em so I have already added it the Google Blanche library okay and find the did finish launching with options method so this is from my previous five ways tutorial so ignore that you need to provide this method provide API key with API key for iOS and now go to the infrared plist file and add IO dot flutter dot embedded views preview which is a boolean and set it to true so you can add this by pressing the plus button at the end of the code or Keeley's file so I have already added it all right okay now close this okay now if for some reason the project is not able to find the Google Maps library you need to go to the iOS folder in a terminal so that's my iOS folder and run pod install so if you are running pod install for the first time you will see the new libraries in green color so I have already installed it that's why it's showing in a different color so it will generate a new boards project once that is done you should be all set now let's go back to the flutter project and import the necessary packages we need the sink brackets and the Google Maps package all right so let's start by declaring you complete our variable around the Google Maps controller now we will declare another variable for a default latitude and altitude so I'm going to name it Center constant attitude on latitude so I am going to be you say 45 5 5 2 1 5 6 3 and longitude is - 1 - 2 . 7 7 4 3 3 alright ok now we need a set of markers to add it to the map so I'm going to set it to empty for now and we are going to need it under the lat/long variable to set the last my position and setting a to default Center and another variable to set the map type by default I am setting it to normal now let's add a stab to the UI the children the first one is the Google map and Google map will have a on map created function so we will be writing that method shortly and the initial camera position we are resetting it to Target Center with soon yellow one and the map type property is set to current map type and the markers is our edible markers and when the camera moves you are going to write a new function so let's write those functions on map created will have a Google map controller variable controller so Consta map is created we are going to call our complete they're not complete with a controller now let's write the camera move function that will have a camera position as parameter and set the last map position is equal to position that alright so there we have our Maps now let's write a function to add button to the maps so that will accept a function and then I can data and return a floating action button on + or - button we are going to count the function and able to enter tap-tapping size that material type Alex I store planet and the background color has blue same as the a bar and the next property is the child which is an icon will set the past icon and the size to 36 okay so let's add that to the UI so for that I am going to add a padding to the padding heads in set of 16 and for child I'm going to add a align widget with alignment top right so we will be adding the buttons to the top right of the maps alright and this time will be a column the children let's Hatter buttons so button so we will be writing this function in a short pile this will Topol the map type let's add some spacing after that so for that I will be a day sized box and add another button to find the marker so let's name it on ADD button first and I can let's set it I can start add location let's write those functions for said state for the current tap type if the map type is normal we will set it to satellite else we will set it to normal now let's write the addmarker function and we need to call 68 on de Markel's so Marcus would add it will take a new marker so marker with the marker ID and do marker ad that said it will last map position dot to stream and the position to last a position and the infowindow set the title has new bed so this is a window in which use the C is when he taps on the marker icon and the icon will set it to a default marker okay so now it is or the UI let's try that marker is added let's tobe the maps so that is also working now the next thing we are going to do is we will animate the camera or the maps to a new position so for that I am going to declare a new variable new position which is a camera position so free a new camera position with bearing say one ninety two point eight three three and the target is a new latitude longitude let's set it near to the other one okay and keep the launch through the same and had detailed a fifty nine point four two zero and the zoom of eleven now we will write the method to animate to the new camera position so that will be a future void let's say go to position one and this is an assonance function so let's get the Google Maps controller called await controller dot future and controller dot animate camera to do camera position so camera update dot new camera position with a new position okay let's add one more button to the UI so go back to the Wilber third let's add some spacing and add a button to call this 4/3 go to position 1 and I can let's set it to I can start a location searching okay so reload the app so let's add a marker no enemy to new position and had a marker okay that's a new position so that's also working now toggle the maps okay now we will move the match to the new position and add the marker okay let's try reloading again and I'm going to go the map and add the marker that will animate to the previous position and I have added the marker there okay so that's all about Google Maps for flutter in this video hope you enjoy the video if you do please don't forget to Like subscribe and share it'll be like and for notifications ahead thanks for watching

Channel: Mobile Programmer

Views: 67,609

Keywords: fluttergooglemaps, flutter google, flutter maps, flutter learn, flutter tutorials, flutter tutorial, flutter code, flutter dart, flutter api, flutter ios, flutter android, flutter coderzheaven, coderzheaven.com, mobile programmer, api keys, maps in flutter, load maps in flutter, learn flutter, implement maps in flutter, google cloud, enable maps, Google Maps, google maps flutter

Id: lismPZMxFS8

Length: 13min 28sec (808 seconds)

Published: Sun May 12 2019