Flutter Google Maps - Maps, Markers, Polylines, Places API & Directions API

so today i'm going to teach you how to use google maps in your flutter apps okay let's get started as you see here we are gonna use google maps flutter package and this is gonna help us to implement the google maps widget into our app so here is very easy to understand step by step how to implement google maps into our app we're gonna follow all of these steps first of all we will go to google cloud platform so here you can find the google maps services down at the bottom in the menu then you need to do two steps first of all you will need to enable the api for the map sdk for android and then you will need to do the same for ios so you will have to click on maps sdk for ios and you will click on enable as soon as this is ready let's go back to the description of the package and we can continue with the next step so we will need to make some changes into our flutter app now especially we will need to go into the app build gradle file for android and we will open this one and we will update the minimum sdk version from 16 to 20. we can close this android file and we can move on then we will need to copy this new metadata into the android manifest to do so let's open the source folder we will go into the main folder and we will open the android manifest in row 31 we can copy and paste this line of code and we will need to input our api key however as of now we have not created yet our api key so in order to change that let's go back to google cloud platform and let's click on credentials then we'll go up and we will create new credential and we will select api key okay perfect so you will have your own api key and you will need to restrict okay so in this case i'm just gonna change the name of the api key from api key one to google maps api key however i'm not gonna apply any restriction but you can choose any of this one for example if you select ios app you will need to add the bundle id or the app that can use this api key i'm gonna save it and i'm gonna delete this api key later that's why i'm not gonna add any restriction however remember that it's safer and it's best practice to add a restriction now i'm gonna copy the api key and i'm gonna paste it inside android manifest where it is required perfect now the api key is there we can close the android folder and we can close the android manifest after saving now let's go back to the getting started document and we can continue by implementing google maps into the ios version of our app so i'm going to copy this code snippet and then i'm going to go into the appdelegate.with file where i'm going to replace most of the code that is there basically we're adding the import google maps and we're gonna need to change something in row 11 and basically we just need to add our api key as well here so we copy and paste it from google cloud platform and we will add it here perfect we can save this and we are good to go even with ios for now now the next step is to add some dependency we could add it from the pubspec.yaml file however i'll just add it simply from the terminal i'm gonna type flutter pub add google underscore maps underscore flatter as this run it will basically add the dependency that we need now i cleaned up a little bit the project removing some files that we don't need and we can continue now let's go back to the package website and here there's some codes nippeta that give us a sample usage of google map we can actually try it and basically in the main.dart we're gonna remove everything and we're gonna paste the sample snippet so as we try the sample snippet there's gonna be an error which is mostly due to some issue with the dependencies in order to fix this i can just close the app and then i'm gonna restart it it will take a few seconds to load but as soon as the app will open again you will see that everything works fine and there is a map on the screen perfectly it seems that we managed to implement google maps so far at least with the sample snippet now let's see what we did first of all we have a stateful widget inside of which we created a controller that we will use to control the map then initially we have two different camera position objects with two different set of latitude and longitude then what actually render the map on the screen is this google map with jetta where we select which type of map we want and which is the camera position and then we have a floating action button at the bottom of the screen that let us move from the first camera position to the second one in fact this refers to this go to lake method which use the controller.animate camera in order to move from one camera position to another and in fact if we try to click on the floating action button you can see that the maps change and we move from the first position to the second one now let's look a little bit into the google map object let's change the map type to normal and as you can see the map is different we can also change it to satellite or even to another one which is gonna be terrain during this episode we're always gonna use the normal one so let's change it to normal and let's stick with this one for now perfect so now we can utter start the app and we can start to customize this sample code snippet first of all into the google map widget we're gonna add some markers to do so we will need to create a marker object so we have this static final variable which is of type marker and we will call it k google plex marker so we're gonna use the market with jetta and as a marker id we need to use the marker id widget we are simply gonna use the id k google plexa and actually let's also add underscore now let's add more information so we can add the info window this is gonna be useful so that the user can click on the marker and check some information about the location in this case we're only gonna give the title then we also need to pass the icon and we will need to use bitmap descriptor and in this case we will select the default marker which is gonna be red and as a position we are gonna select the same latitude and longitude that we are using for the camera position for the key google plexa and essentially as soon as we restart the app we will see the marker at the center of the camera position that is selected because the initial camera position is k google plus for now so let's add the k google plus marker into the marker list and as you can see it is appearing there and if you click on it you can see the title into the info window perfect let's create another marker so that we have also one into the second camera position that we have so we can just copy and paste and we will change the name to k lake marker perfect let's also change the latitude and longitude in this case we're also going to change the color and we will use default marker with the hue and then we will use hue blue so the color is different perfect let's add it to the list of marker and as we refresh actually you see that the marker moved and this happened because we kept the same marker id if we start you will see both of them however it's better if we just change the marker id for now so we need to use a different marker id for each of the marker let's also change the title inside info window perfect we cannot restart and you see the two different marker being available on the map now if instead click go to the lake you will only see one marker because the map is more zoomed in so you cannot see the second one okay now let's move on as you see we have two marker on the map and let's find out how we can connect this to marker with a polyline so first of all let's create a new variable we will use a static final variable of type polyline we will call it underscore k polyline and this is gonna be using the polyline widget first of all we need to pass an id and we're gonna use underscore k polyline very simple then we need to pass a list of points and then the line that we will create using the polyline widget will pass through the points that we list here basically we will use the latitude and the longitude of the two marker that we have added on the mapper perfect so we can just copy and paste inside the list then we can hot restart but you will not see the line obviously because we need to add it into the google map widget okay here we will add the parameter polyline then we will add two curly brackets and we will pass the underscore k polyline variable that we created above as you can see now we have the line connecting the two markers let's change the width to 5 so that the line is going to be thinner so when we after start you will see the new final line for this polyline perfect now let's start to understand what we can do with polygons instead so let's add the polygon parameter inside the google mapper widget okay now we can create a new variable and this is gonna be the underscore k polygon variable essentially it will return a polygon object okay so let's use the polygon class and let's pass a polygon id using the polygon id widget we will simply pass the underscore k polygon just as an example and then we need to add all the other parameters in order to create a polygon object so we will need to pass a list of points and we can just paste the one copied from the underscore k-poly line then it's it's a polygon so you will need to have a little bit more than two points in this case let's just do one with four different points so i'm gonna add two more lat long objects and i'm just gonna need to change a little bit the coordinates then let's add a stroke width as well so that we avoid the line is going to be too thick and we can pass it inside the google map class now perfect once we auto start you see that we have this weird shape on the map and to avoid having these two triangles we can actually just change the order of the points inside the list of the polygon and then you will see a different shape perfect let's also change the field color and let's set it equal to transparent so that we will only see the perimeter okay perfect so everything works fine with the polygon we can move on okay what we are going to do now is to clean up a little bit the code we are going to remove some of the marker we are going to remove the polylines and the polygons and we're also gonna comment out the floating action button basically we won't need this anymore for now because we are gonna move on and start to add some more functionalities to this simple app in particular in this section of the video we are gonna create a text form field and basically the user will be able to input any location just by writing the name of the city and the map will update automatically and to do so we will also use the places api okay so as you can see on the screen i'm starting to add the text form field and i'm also adding an icon button which is gonna be the button that we are gonna press after we input the location that we want to see on the map so for now we have the widgets let's wrap the text form field with an expanded widget so it will work better and let's also wrap the google map widget with another expanded widget perfect now we cannot restart and as you see on the on the right we have our text form field available in the screen and actually i've also added an app bar now in order to record the input of the user we are going to use a search controller basically i'm gonna create a text editing controller and we are gonna call it underscore search controller and we just need to create the text editing controller object now perfect we have already passed it into the text form field so now we can add some more element into our text form field but these are mostly about style so we're gonna add the decoration parameter okay and here we are only gonna add the hint text parameter and basically we want to let the user know that they need to input the city so we're gonna write search by city then on the unchanged parameter we are gonna make sure that we're gonna print the value that the user is typing every time there is an update so that we can check from the debug console what's the input into the text form field so as you can see i'm writing milan and you can see that inside the debug console perfect now so we are back to google cloud platform yeah we need to click and enable the places api it will take a few seconds and after you enable it you will see it here among the enable apis then you need to go to credentials and you click on your api keys and at this point let's also restrict the key so that it's only working for three different apis the maps api both for android and ios and also the places api so let's select them here in this menu and then we can click on save and now this api key will only work for these three different apis now we can go back to our code and here we will need to create a new file we can call it location underscore service and we will create location service class with this class we're gonna handle the connection with the places api so here first of all we will need to create a new variable a string and this will contain our api key then we will prepare the get place id method this will take a string as an input which is gonna be the city that the user will type into the text form field and basically will return the place id based on the places api then we will use this place id in order to get all the information about the place using another method that we will call getplacer so let's start to develop the getplace id here we need to build a url so i copied and pasted this url directly from the places api documentation and as you can see we need to specify which is the input so the city that the user is typing and also which is the input type in this case we're going to use a text query because the user is going to input a string so the name of the city now as we have the url we can start to send a request in order to retrieve the data from the api so we're going to use the http package so as you see i've imported already version 0.13.4 and now we need to add this as a dependency inside the location service file so once we add it then we can actually generate the response variable then once we have this response we need to convert it into a json format so we will take the body and then we will use the dart convert library in order to convert it then we will take the json and we will access one of the field inside it it's called candidates it's gonna be a list so we will take only the first value and then we will take the place id we will cast this as a string and we will just print it into the console and also we will return it because the function will return a string now we can test it back into our main.dart file let's create an instance of the location service and then we will use the get place id method to which we will pass the text that we are storing in the search controller if we actually try to click on search right now actually nothing happened and the reason is pretty simple because if we go back to our location service you see that our key which is our coded is not there so we need to copy 10 pc from the google cloud console and we need to paste our api key now let's restart the app so once the api is restarted if we add a new destination and we click on search you can see in the debug console that we are actually printing a string and this is the actual place id of the city that we are looking for now we can move on and we can start to develop the get place method first of all we will need to add a different url because in this case we are looking for the details of a place based on its own place id so we need to pass the place id and the key in order to get the place id let's also create a variable inside the get place method and we will call place id and we will use the get place id method that we created before in order to get this id and then we will pass it into the new url now we can just copy and paste response and the json variable from the get place id method because it's going to be exactly the same and now we need to create a new result variable here from the json file we are only gonna take the result field and we're gonna cast it as a map then for now let's print the result and let's also return it let's check what we get now to test the new method we can go back to our app and we can write a new city however first we need to go into the icon button and change the method because we were still using the get place id method and now if we try we are actually getting an error and the reason is pretty simple i actually forgot to add the await keyword in front of the getplaceid method so once we add that we author start the app and finally we can check whether everything works fine so let's add the city let's search and as you can see we have all the city details down into the back console so everything seems to be working fine for now now we need to make more changes because every time we want to look for a city we also want that the camera position on the map changes and we go to the new city so let's create underscore go to place method here in the main.dart file and here we will pass as an input the results that we get from the getplace method we will call it place from the place variable we are gonna extract the latitude and the longitude of the cd that we are looking for to do so we will need to take the field geometry then location and then lat and for longitude we will be exactly doing the same essentially we are just going to change lat with lng longitude okay now we have this two new variable and we can actually use it here into the camera update the new camera position we're gonna create the camera position widget and as a target we are gonna pass the new latitude and the new longitude using these two variables and then we also want to make sure that we set a zoom that we are comfortable with so let's put equal to 12. now we can use this go to place inside the icon button so first of all let's change the method to asynchronous and let's create a variable place this is gonna await the get to place method from the location service then after this we're gonna call the underscore go to place method and we're gonna pass the place if we after start we can try it so let's pass the the city again let's click on the icon button and as you see we are actually moving on the map so if i change to another city let's say paris and i search again you see that we're moving from milan to paris perfect so it seems that our go to place is working fine and we can actually move on the map from one city to the other okay now let's move on to the next step of this tutorial so now we are gonna learn how to change the marker position dynamically as we change the location in the map and we're also gonna learn how to set polygons by clicking on the map so first of all let's create a set to marker and we will call it underscore markers then we will also initialize a set of polygon and we will call it underscore polygons and we also need to add at least a latitude and longitude or the polygons basically here we're gonna store all the different points that then we're gonna print on the screen in these sets we're gonna store more than one polygon so we also need to create a polygon id counter that we will use in order to change the polygon id now let's remove all of this variable that we have created before because we're gonna have a different approach now okay now once we after start you're gonna see that we are in our initial position however there's no marker anymore so first of all let's add the init state method yeah we're gonna use the init state in order to draw the marker on the map as soon as the app start to do so we will use the underscore set marker method and here we're gonna pass a latitude and longitude equal to the initial camera position that we're using now and as you can see there's an error because we have not created yet the underscore set marker method so let's create it and let's set it that we need the point as an input perfect here we're gonna call the setstate method and then we are going to add a new marker into the set to mark it that we have created before every time this set marker method is called so let's create a marker and here we need to set the marker id and we are just going to call it marker for now and we're gonna set the position equal to the point as you can see now as we restart the app we see the marker again now we need to make a change into the go to place method so that every time we change the city we actually create a new marker so let's try to move around let's go to these other city parties and you can see that there's a new marker in the middle of the city perfect so now let's move on and let's also create the underscore set polygon method so that we can actually create polygon on the map just by tapping on the screen here first of all we need to create a polygon id so that each polygon we create has a different id it will use the polygon id counter and every time we create a new one we're gonna increase the counter so that each polygon has a different id then we're gonna do something that's very similar to what we did before and every time the set polygon method is called we are just going to add a new polygon into the set of polygon that we have created before above okay and now we are missing the points so let's add the points parameter and we're gonna pass the polygon lat long variable here and this is the list of latitude and longitude that we have created above now let's give it a stroke with equal to two and let's give it a color equal to transparent [Music] perfect now we can go back to the google map widget and here we can add on top parameter so that every time we tap on the map we're gonna record a new point into the list of latitude and longitude to do so we will use the set stata and we will add the point to the list that we created above perfect and after we add the point we are going to call again the set polygon method which will draw again the polygon on the map perfect now i want restarted let's go to the city and let's try to click around on the map and you can see that as soon as you click on three different points you will start to see the perimeter of the polygon appearing on the screen and you can add more points perfect so now we are able to dynamically create a polygon just by tapping on the map okay now we can continue and move on to the next step now we are gonna start to implement the direction api in order to check how to move from one place to the other and see a polyline drawn across two different cities to do so first of all we will need two different text form field in fact we will need user to input an origin and a destination so let's make some changes to the ui and as you can see now we have two text form fields inside a column so now let's wrap this column with an expanded widget and let's also add this column inside the row so that we can actually pass also the icon button perfect let's delete the rest of the code and let's just copy the icon button and remove the comments so now as we auto start you can see that there are two text form fields and the search button ok the two text form field are still using the same controller so we will need to replace this controller let's call the first one origin controller and the second one destination controller and we can also update the hint text okay as we did that we also need two different text editing controller and let's copy and paste it and then let's change the names perfect so now we can input two different cities and finally i think for now we can comment out this variable place because we are not going to use anymore the get place method instead we will need to develop a new one but first let's go back to google cloud platform because we will need to enable a new api so we will need to click on the direction api and we will need to enable it so it will take a few seconds as soon as it is ready we need to go to the credentials and we need to make sure that our api key work also with this new api so let's select the direction api as well here and let's save it perfect now we are ready we can go back to our app and we can start make some changes into the location service basically we will need to develop a new method so let's create this new method we will call it get directions and this will take two strings as a input it will take the origin and the destination city and yes this is gonna be another asynchronous function okay now we can copy most of the code directly from the get place method and we're gonna make some changes so first of all for now we can remove the results and we can remove the url because we're gonna need a custom url so let's remove the return as well for now we commented out and i'm gonna paste the new url which is specific for the direction api now we are gonna add the variables that are needed as an input so we need the origin the destination and as usual we will need to add our api key perfect so we can save this and continue so there's no change required for the response and the json for now we're gonna print the json variable and we're gonna see what we get back from the api response so here in the main. we're gonna create a new instance of the location service and we're gonna use the get direction method we're gonna pass the text from the origin controller and also the test from the destination controller as an input so once we do that let me increase the size of the debug console and let me add the two different cities as we search it we're gonna have an error and the issue is pretty simple is that the url was not correct and i forgot to add api between maps and direction okay now after making the required changes i cannot restart and i can try again so let me add the two different cities and let me search again and as you can see we are now printing the json variable into the debug console and there are all the information that we need including the latitude and the longitude other two cities and also the polyline perfect so now we can make some more changes to the get direction method first of all let's create the variable results and then we're gonna need to change the return type of the function because we're gonna return a map and actually before creating the map let's add the print statement for results so we're gonna check which map we create so let's use the square brackets and let's start to define the map so first of all we're going to learn about the bounds for northeast and the bottom for southwest and we will use this to define how much to zoom on the map then we're going to return the start location and end location and basically these are going to be a couple of longitude and latitudes so that we can actually draw a marker into two places and finally we're also gonna add the polyline so in order to get the bounds we're gonna first select the routes then we're gonna select the first one using the zero and then we're gonna select the bounds again for northeast we're gonna select northeast while we'll use southeast for the second one okay we can copy the first part for the start location and here we're gonna use the legs and we're gonna select the first one and then we're gonna select the start location for the end location as you can imagine we just need to change the start location with end location and finally we need to make some changes for the polyline in fact we will need to look for the fields overview polyline and here we're gonna need to take the points okay so now we are almost ready with our results variable we cannot restart and let's just make a test just to see if everything works fine and as i click on the search button you see that we are still printing our result variable here in the debug console however on the map nothing changed and we are still not moving the camera position so for now let's start to make more changes and first of all we will create the direction variable into the icon button basically we will save the result of the get direction method into the direction variable and then we will start to use the go to place method again however now we're gonna pass two different variables here and we're gonna pass the latitude and the longitude so as we are changing the input we will also need to make changes into the go to place method and basically we're just gonna pass two different double one latitude and one longitude and that's about it for the changes and as we after start if we're gonna add two different cities and we click on the search button we're actually only gonna show the origin city for now and for now we can keep it like that we will change it later now let's work on the polyline and here in the result dictionary we're gonna create the polyline underscore decoded variable now we're gonna use this flatter package so the flatter polyline points 1.0.0 in order to take the result from the direction api and to decode the polyline because as of now everything is encoded so let's copy the dependency and as you can see i already added it into the pub spec.yaml once we save we will update the dependencies and we will be able to use this new library so i'm going to use the polyline points class and i'm going to use the decode polyline method and basically this will give us a list of latitude and longitude we will be able to use in order to draw the polyline on the map so now let's go back to our google map widget let's pass the polyline parameter here and actually we have not created yet the underscore polyline variable so we will go above and we will create this new set of polylines and actually we will also create another variable that will store the polyline id counter now let's create the set polyline method and here we're gonna do something very similar to what we have above for the set polygon first we create the polyline id value then we will create the polyline id counter and then every time we call this method we're gonna add a new polyline object into the polylines list perfect here the object will have the polyline id and then you will have a few more parameters we're gonna add the width and we're gonna set it equal to two then we're gonna add the color and we're gonna make sure that the line is gonna be blue then we're gonna pass the points these are gonna be an input for the method and this will come from the direction api after we decode the polyline using the flutter polyline point library okay and now as we finish to pass the latitude and the longitude we need to also cast the points to a list perfect now let's also add the input inside the method and this is going to be a type list of point lot longitude perfect so let's input the dependency and actually we need to change the lot to latitude and lng to launch it okay now everything seems to be working fine except the boy lines because we are missing a s so we can fix that and now we can simply add the set polyline method here into the icon button and we will pass as an input the polyline decoded and now finally we can auto start and we can pass to different location one origin and one destination then we click on the button and as you can see there is the polyline drawn on the map in blue that connects the first city with the second one however is still difficult to see because we are only focusing on one city right now and now in order to fix this we are gonna pass two more inputs in the go to place the bounds northeast and the bounds southwest now let's also add the go to place so that the function is able to accept these two new inputs so we're gonna add the bound northeast and about southwest these are gonna be two different maps now let's add a new controller and we're gonna use the animate camera method again then we're gonna create up the camera update widget and now we're gonna use the new lut longitude bounds we're gonna pass a padding equal to 25 and then we're gonna pass the lat to the longitude bounds widget where we need to set up the southwest bound and the northeast bound to set up these bounds we're gonna use the latitude launch dude wichita and we're gonna pass the latitude and the longitude of our southwest bound and then we're gonna copy this in order to pass the one for our northeast bound as well perfect so the method is ready so we cannot restart and we can try it again so let's pass milan let's pass paris and then let's search and now as you can see we have the poly line connecting to two cities and the camera is updated so that you can see both the two cities at the same time and after implementing this part as well i think that's pretty much it for this episode regarding google maps let me know down in the comment if you want to learn more about google maps

Channel: Max on Flutter

Views: 135,903

Keywords: google maps flutter marker, google maps flutter tutorial, google maps flutter ios, custom marker google maps flutter, multiple markers google maps flutter, flutter google maps search location, flutter google maps polyline, google places api flutter, flutter google maps places api, flutter google maps directions api, google directions api flutter

Id: tfFByL7F-00

Length: 34min 1sec (2041 seconds)

Published: Sat Oct 30 2021