Flutter Google Maps: Markers, Polylines, & Live Location Tracking

welcome developers in today's video we're going to walk you through the process of integrating Google Maps into your flutter app by the end of this video you'll be able to display the user's current location set markers for the source and destination locations draw polylines between them and even update the marker automatically as the user's location changes before diving into the implementation it's crucial to grasp a few essential steps for integrating Google Maps the process involves obtaining a Google Maps API key which by the way way is not completely free however comes with initial credits for experimentation which you can use to play around with Google Maps so let's get the API key first visit the Google Cloud platform using this link once you are in click on get started set up a billing account to unlock free credits select your country and proceed with agree and continue Choose Or keep the default payment profile enter personal details like account type tax information name and address and lastly fill your credit card details and click on continue once the initial setup is complete a popup will display your API key copy this key and navigate to the Google Maps platform at this point you can choose to restrict your API key but for now we'll skip this step now you have to create a new project so that you can have all the apis enabled for your flutter project in just one place therefore click on create new project enter a name for your project select the billing account and click create now we have to enable all the necessary apis which we need for our flutter project go to API and services and enable these three apis Maps JavaScript API Maps SDK for Android and lastly the maps SDK for iOS also ensure that the enabled apis appear in the enabled apis section by following these steps you've successfully enabled Google Maps sdks for Android iOS and the web we now have the API key and map sdks enabled which we can use in our project so let's dive into the code within our flutter project will be implementing the Google Maps flutter package to achieve this include this dependency within the pubp speec yaml file next specific platform code must be added for both Android and iOS which you will find here for Android start by navigating to androidapp build.gradle inside this file make the necessary adjustment by setting the minimum SDK version to 21 subsequently an API key obtained from the Google Cloud console needs to be added inside Android manifest.xml file to accomplish this open androidapp srcm and locate the Android manifest.xml file insert the following code within the application tag now let's set up the API key inside iOS navigate to iOS that Runner app delegate Swift and add the following code if you wish to set up Google Maps for the web additional steps are required you can find these steps in the Google Maps flutter web package documentation now let's create a separate page to display Google Maps upon import reping the Google Maps package use the Google Maps widget provided by the package directly inside the build method the Google Maps widget expects an initial camera position to determine the initial display location of the map so let's create a location for example Google Plex along with its latitude and longitude Now using this camera position object set the initial location as Google Plex and also specify a zoom level for instance 13 upon running your app you will observe the map displaying the initial location as Google Plex so so let's showcase this location using markers in our app as well within the Google Maps widget utilize the markers property to Define markers the markers property is a set so use curly brackets to instantiate the marker object with a marker ID such as Source location and a default icon assign a position to the marker for example the coordinates of Google Plex now save your code and you will see the marker displayed at the Google Plex location additionally we will add another marker at a different location this will enable us to draw a path as polylines between these points later on therefore create another location for example Mountain View with a different latitude and longitude now proceed to create a marker for this new location by duplicating the existing marker and adjusting the marker ID as destination location and Mountain View location accordingly save your changes and now you'll be able to see the second marker as well now that we have created the markers let's proceed to fetch the current location and display the marker for our current location to achieve this we'll utilize the location package for handling location related functionalities Begin by adding the this package to the pubspy yaml file and importing the dependency into the Google Maps page before implementing the current location functionality add these two lines of code to the Android manifest.xml file this allows access to the current location both in the foreground and background modes for iOS perform the same steps insert these entries inside the info.plist file alongside other string and key entries within the string tag add the first entry specifying the key with the reason for using location per missions repeat the process for the second entry while keeping the key consistent now rerun the application in case you encounter a cotland version error on Android consider upgrading to the latest cotland version inside the build.gradle next within the Google Maps page create a method named fetch loation updates inside this method Define a Boolean flag service enabled next create a variable permission granted to store the permission status required to access the location before requesting permissions check if the service enabled is true to to do this initialize it using the location controller instantiate the location controller and call the service enabled method of the location controller object to check the service enabled status if the GPS service is enabled proceed to request the location service otherwise return after checking the GPS service status request the location permission first check the permission status using the has permission method if the permission status is denied request permission this action prompts the user to allow the app access to the location if the location permission is not granted exit the method upon granting location permission fetch the current location use the onlocation changed listener of location controller to listen for location changes within this listener if the current location latitude and longitude are not null update a variable for example current position which can be later used to display the marker here use the latl object to store the latitude and longitude of the current location as the fetch location updates method is complete call it from the init state method to fetch the current location at the very beginning within the init State let's utilize the widgets binding instance and add post frame callback to invoke this method after rendering the UI upon running your application it will prompt for permissions once location permissions are granted you can print the current location inside the fetch location update method print the current position after allowing location permissions following a hot restart the latitude and longitude of the current location are printed now let's display a marker for this current Loc location within the scaffold before displaying the marker check if current position is null if it is show the circular progress indicator otherwise display the map with markers create a marker for the current location copy the existing marker change its ID to current location and set the current position as the position upon running your app it will now show two markers at the Google Plex one for the source location and another for the current location the reason why current location is also showing as Google Plex is because on the imator the default location is set to Google plex now to simulate a moving user click on the three dots navigate to the location menu and within the roots tab add Mountain View as the destination location click on the direction button choose the starting point as Google Plex and save the route next click on the created route and increase the playback speed to 5x to observe the moving marker finally click on play route now go back and observe how our marker is dynamically moving from the initial location the last thing we aim to achieve is displaying the path between the two markers the source and the destination locations to accomplish this we'll utilize the flut polylines package Begin by adding the flutter polylines package to the pubp do yaml file and then import the package into Google Maps page now let's create the method fetch polyline points that will retrieve the necessary points create an instance of polyline points utilize the get route between coordinates method of polyline points this method takes the Google Maps API key as well as as the initial and Target locations encapsulated in a point letter Lang object consider storing the Google Maps API key inside the constants do do file for Simplicity and use it directly here next let's store the output inside the result variable if the result points are not empty we will map these points as positions into a list and then return it otherwise just return an empty list now from this method we will obtain a list of positions that will use as coordinates to draw the line Begin by initializing izing the polylines map with the types polyline ID and polyline which will store the polylines inside the Google Maps widget utilize the polylines property consuming polylines Dov values within the set collection create another method generate polyline from points which takes the list of coordinates within this method Define the polyline ID first with a unique name create a polyline object setting the ID color points as polyline coordinates and the width lastly inside set State update the poly L map ID with the obtained polylines now the last step is to call these two methods fetch polyline points and generate polyline from points inside init State however it's not ideal to call these methods directly inside init State therefore we will create an initialize map method within this method we will first call the fetch location updates method replacing the direct call inside init state next we will call the fetch polyline points method and store the coordinates in this variable lastly we will pass these coordinates to the generate polyline from point method in essence the fetch location updates method fetches the current location then we obtain the poline points between the initial and Target locations finally we pass the coordinates to generate the path between these two points now you can save this and rerun the application now within our map you can observe that a path has been created between the source and destination locations additionally the marker updates dynamically as we change the location this is how we've implemented Google Maps in our flutter app if you have an app idea and wish to integrate Google Maps in a highly optimized way head over to heyl flutter. c/a submit your request and we will develop this app for you

Channel: HeyFlutter․com

Views: 5,408

Keywords: user current location, user location, live location tracking, location tracking, google maps, Google maps integration, flutter google maps, flutter google maps api, flutter google maps ios, flutter google maps tutorial, flutter google maps integration, flutter google maps android, flutter google maps and live location tracking, google maps flutter, google maps flutter current location, google maps flutter app, flutter maps api, flutter maps and markers

Id: 4ucWoHtBby0

Length: 10min 43sec (643 seconds)

Published: Fri Mar 15 2024