Flutter Google Maps API Tutorial | Markers, Polylines, & Directions API

hey everyone today i'm going to teach you how to add google maps to your flutter apps i'll go over how to add map markers create info windows make http requests to the google directions api for route information display polylines and animate the map [Music] camera before we get started make sure to smash that like button and subscribe as it really helps out the channel if you want to learn how to build real world apps with flutter check out my courses on launchclub.io and with that let's get started in a new project let's add the necessary packages first we have dio which lets us send http requests to the google directions api for route information next we have flutter polyline points which lets us decode plyolan strings into the latitude and longitude points necessary to display the route and the last package of course is google maps flutter to display a map to our users to use google maps we need an api key from the google console you can get one by heading over to this link creating a project and generating an api key in the api library you have to enable the maps sdk for ios and maps sdk for android while you're here you should also enable the directions api now let's go into our main android manifest in the android folder and add a couple of lines specifying our google maps api key for ios you have to open up the ios folder in xcode and go into the app delegate at the top let's import google maps and then inside of the application function add the line gms services dot provide api key with your api key inside main.dart we can add some code to display our map create a stateful map screen widget and return a scaffold with the body of google map we have to specify the initial camera position which i'll make a static variable for these are the coordinates of san francisco zoom is the zoom level of the camera the lower the number the less zoomed in the map camera is the maximum level is usually 21 depending on the location let's set the initial camera position to initial camera position and disable the my location button and the zoom controls as we won't be using them when we run the app the map appears now we want to add a floating action button that centers the map camera on san francisco to do this we need to add a google map controller variable don't forget to dispose it in the dispose method instead of instantiating a google map controller like a scroll controller the google map widget has an on map created callback with a controller that we can assign to our variable we can then create a floating action button that has a center icon and the on pressed calls the animate camera method to move the camera to our initial camera position we also should change the material apps primary color to white and hide the debug banner tapping on the floating action button animates the camera back to the original position taking a look at the ui we can see we have two markers the origin and the destination when the user long presses on the map we set the origin marker the next long press sets the destination marker right under google map controller we'll add the two markers note that these are null at first which means we won't display them until the user selects the marker positions the google map widget takes in a parameter called markers that takes in a set of markers we can create an empty set and use collection ifs to only add the origin and destination markers if they are not null to add long press functionality we can add onlong press which gives a lot long position so let's make a private method called add marker and create this below our main method if the origin is not set or both the origin and destination are set then we want to set the origin marker this means that we know the origin must be set in the else block so it's safe to define the destination marker we call setstate to update our ui and instantiate our origin marker every marker needs a unique marker id we can add an info window with the title origin this displays an info window when the user taps on the marker you can also define a subtitle snippet and on tap for the window by default the marker color is red but we want to set it to green using a bitmap descriptor the position is set to the past in that long then we just reset the destination marker by setting it to null in the else block we define a destination marker similar to our origin marker with the color set to blue and that's all we have to do to add markers when we long press on the map tapping on a marker displays the info window now let's add an app bar scaffold has an app bar with google maps as the title text and two text button actions that animate the camera to the corresponding position i define tilt which will angle the camera when animates to the position we only want to show the text button if its marker is present let's do the same for the destination button when we tap on the buttons our camera animates nicely our next task is to fetch information about the route between our origin and destination using google's directions api create a directionsrepository.dart file that contains the class directions repository we'll instantiate a do client using our constructor and also add the base url for the api notice how we specify json to make sure that all of our requests have json responses now create an asynchronous method called getdirections that takes in the origin and destinations coordinates and returns the future directions we'll define our directions model in a bit to make the get requests with the necessary parameters we can use do.get and pass in our origins coordinates and destinations coordinates we also have to pass in our google api key which i'll define in a separate file called.m.dart remember to import the file at the top of the directions repository once the get request is completed we check if the response is successful and then return directions.from map response.data this factory constructor will be part of our directions model and convert the response data of type map string dynamic into directions note that i'm not doing any error handling here for simplicity i'm just returning null let's create our directions model in a new file we have class directions this has a lot long bounds to allow us to center the camera on the origin and destination a list of point lot longs to draw our polyline the total distance as a string and the total duration as a string our factory constructor takes in map string dynamic if we take a look at the json blob we can see that the routes key contains all the information we need first check if a route is not available and then get the route information if it is next we can create our lat long bounds using the northeast and southwest coordinates distance and duration are already calculated for us so we can grab the string versions of each finally we can return our directions model by passing in the corresponding values here we use the polyline points package to decode the overview polyline passed back in the json if you want to get the written directions for each leg of the route you can parse them by iterating over the steps and accessing the html instructions key import the directions model into the directions repository in our map screen we need to add a directions variable called info after we set our destination marker we want to request the directions info from the api using our directions repository this means our add marker method has to be asynchronous as we need to await a future then we update our state and set info to directions we should also set info to null when the user selects the origin after user selects an origin and destination we want to animate the camera to the long balance of our directions model go to the floating action button and animate the camera to the lat long bounds with a padding of 100 only if the info is not equal to null this way if the user doesn't have any route info we just center the camera on san francisco displaying the distance and duration container on top of the map is simple wrap the google map widget in a stack widget with alignment center if info is not equal to null then we display a container position 20.0 from the top the container has a border radius and box shadow the child is a text widget with a total distance and total duration text the google maps widget has a polylines parameter which is a set of polylines if info is not equal to null we know our list of point lat longs is present we create a polyline with a unique polyline id set the color to red width to five and points is a list of lat long points when we run our app we see that all of our features are working as intended our direction info is displayed when we long press to add the origin and destination markers tapping on the text buttons and floating action button animates the map and tapping on either marker opens up an info window if the api fails to return route info the app doesn't show any route info and still continues to function and that's all for this video for more content like this remember to like comment and subscribe if you're interested in learning how to build complete flutter apps with the back end you can check out my full flutter courses on launch club.io thanks for watching and i'll see you in the next one

Channel: Marcus Ng

Views: 236,865

Keywords: flutter google maps tutorial, flutter google maps api, flutter tutorial google maps, flutter maps tutorial, google maps flutter tutorial, flutter google map tutorial, flutter maps google tutorial, google maps in flutter, google maps flutter, google map flutter, maps flutter, flutter maps, flutter google maps navigation, flutter google maps directions api, flutter google maps route, flutter google maps draw route, flutter google maps marker, flutter map, flutter mapbox, flutter

Id: Zz5hMvgiWmY

Length: 11min 12sec (672 seconds)

Published: Fri Apr 02 2021