Flutter Google Maps Tutorial | Location Tracking, Maps, Markers, Polylines, Directions API
HTML-код
- Опубликовано: 19 сен 2023
- 💼 Book a meeting: cutt.ly/gwmvJbPQ
💎 Ultimate Flutter UI Kit: cutt.ly/3w6tqwFA
In this video, I am going to show you how to work with Google Maps, Directions API, Markers, Location Tracking, and Poly Line Points to create a Flutter application that shows a Google Map to the user, on which they can see their location live while being able to display markers on other points of interest and using the Directions API and Flutter Poly Line Points compute and draw a path between them. We will be using Flutter, VSCode, Dart programming language, Google Maps API, Directions API, Flutter Location Package, and Flutter Polyline Points. Whether you're a beginner or an experienced user, this guide will help you set up and navigate through the process of using Google Maps within your Flutter project. This is an excellent guide for beginner Flutter developers as you will learn how to use Google Maps for Flutter on both iOS and Android.
Resources:
Source Code: cutt.ly/Fwvpz8KP
Google Maps Package: pub.dev/packages/google_maps_...
Location Package: pub.dev/packages/location
Flutter Polyline Points: pub.dev/packages/flutter_poly...
Socials:
Website: hussainmustafa.com
Github: github.com/hussain-mustafa990
LinkedIn: / hussain-mustafa-960920184
Twitter: / hussain34274892
Buy Me A Coffee: cutt.ly/gwmvJbPQ 
Наука
Download the source code here: cutt.ly/Fwvpz8KP
sir any udemy free course available? any link plz
@muhammadahsan1627 I do not have any free coupons available. Thanks.
@@m_hussain_mustafa so please kindly a make detailed video on payment methods of stripe, bank or PayPal.
@@muhammadahsan1627 Ok I’ll try to do that. Thanks
@@m_hussain_mustafa Yes plz, Thanks Sir
very helpful, self explanatory, straight to the point,
10/10
You're welcome 😊
Better than others, very transparent and intuitive
Thank you very much 😊
Thank you very much for your content, keep recording videos about flutter. They are very good!!!
I'm so hyped to hear that. Thank you very much for your support. I appreciate it a lot. I have a lot of cool stuff planned for the channel so keep an eye out. If you have any special requests do let me know.
hello form Egypt, this was the best video that I have seen, thank u so much for sharing your knowledge and help us, God Bless you Hussain
Thank you very much.
Thanks for the epic video. Learned so much. Much appreciated. 😀
Glad you enjoyed it!
Great vid brother. Keep up the good work!
Appreciate it!
What a beautifully straightforward video. Thank you for showing how to configure both android and ios. Nice work :)
Thank you, glad it worked out for you.
dude quick and precise love it
You’re welcome
Thank you for the tutorial ! I went to the console google maps docs it was not working but your video made it working
Glad I could help
Wow. Best video for beginners. Thank you so much. Keep uploading 😍
Thank you very much. I’ll keep uploading.
😍😍😍@@m_hussain_mustafa
Thank you very much.
No worries!
Great video and instructions. Thank you very much!
You're welcome.
this was perfect, thank you
Thank you for your support.
I enjoyed this, thank you
You're very welcome.
Hello from Brazil, great video. I have a question, when i load the app on my tablet device via vscode, how do i choose the destination ? It only show my current location .
Keep uploading videos. They are very useful
Thank you, I will
thanks the video was very helpful
Glad it helped
Wow. Thanks for sharing. Its really helpful
Glad you liked it.
Great content as always, love the new editing style in the videos.
Thank you very much.
Thank you!!!
You’re welcome.
Thanks, I learn lot
Glad to hear that!
ıt's awesome video good job
Thank you appreciate the comment.
Is showing the map free of charge? Google maps offers free mobile dynamic map without cloud based design. Is it the one you show in the video?
Is this also update user location in background when application is terminated?
Thank you very much, Hussain. However, I have a question for you. After some experimentation and reading, I have concluded that we can't create a polyline from the user's current location. That's because it has been defined so that it can be null at any moment. Can we work around this issue? And once again appreciate the tutorial it helps a lot!
you deserve more subscribers..
That is very kind of you. I appreciate your support. Subscribe more content is on the way. Thank you.
Great Tutorial 👍👍👍👍
You’re welcome
hi can you make a video that you can use search text filed to find places and draw 2 locations ( one is my current my location and the other is from search place )
Brooo, this is some top notch contenttttt. You deserve to have Thousands of followers. Dont let anything change your mind. Just stick to it and be consistent. Your days are ahead!
Thank you very much for the kind words and your support. Means a lot to me.
Hi, your videos are amazing. How did you configure your google maps API Key? is it suitable for production environments? I'm having trouble configuring a production ready api key to use along with the flutter_polyline_points library
Thanks. You need to enable the directions API for your Google cloud project and also make sure billing is enabled on the project and a valid payment method is attached. That is pretty much all the setup to ensure the API key is production ready.
thank you so much sir
You’re very welcome.
thank tou
You're welcome 😊
@@m_hussain_mustafa i failed when following to 5min though.
it says can't read 'map' I have checked the api key.
Guess I'll have to follow some in depth guide to figure out syntax like map controller or so.
Thanks man
You're welcome.
I have been learning from your courses on Udemy. Loved your videos as always and the learning curve is very high. Also it would be very helpful if you could make a similar video for Flutter Mapbox Integration.
Thank you. I'll look into Mapbox for you.
@@m_hussain_mustafa Thanks a lot for your timely response. Means a lot to me. :)
Very useful video
Thank you.
Thank You
You're welcome
Great content! Are you using your own real device for the track current location part? Because I was unable to do so with the iPhone simulator
Hi,
The simulator has settings available on it to simulate location.
@@m_hussain_mustafa
Thanks for your quick turnaround!
I tried to simulate a custom location. I once clicked on Allow While Using. However, the next time when I run the codes, I experience error in granting location permission:
flutter: Permission granted: PermissionStatus.denied
flutter: Permission requested: PermissionStatus.permanentlyDenied
Since then I am not able to do anything
Hi thanks for great teaching i have issue during build.gradle the error always shown up and say Your project requires a newer version of the Kotlin Gradle plugin.
Hi, I believe you need to update your android SDK version.
@@m_hussain_mustafa thanks, it was only different with your code and i solve it thanks again
can you take a course for flutter map?
I'm working on a Flutter application and I'm trying to implement geofencing functionality. I want to be able to track when a user enters or exits predefined geographic regions and perform certain actions based on their location. However, I'm not sure where to start or what packages or APIs to use.
Would you please provide a step-by-step guide or example code on how to implement geofencing in Flutter? It would be really helpful if you could explain the concepts involved and recommend the most reliable and up-to-date packages or APIs to use for geofencing.
If you provide a video tutorial it would be the unique on youtube
Thank you in advance!
Hi, take a look at this: pub.dev/packages/geofence_service
i built the code (apk for android to test it on real device) but i keep getting loading... without showing my location. the app work fine on the emulator. My phone is Samsung note 10 plus fully updated
Hi... I am having an issue... The part where we add permissions and then after error we put the letest version of gradle.. I am putting the letest versio (1.9.24) but i am still getting the same error... Can anyone here help me?!
Man, what a fantastic job, I just think it would be better if the camera position was only updated when the location actually updates and not simply by moving the camera around.
Thank you for your comment. The camera position only updates if the user moves. Otherwise, it does not.
Hm... strange, when I was testing the user wasn't moving and I was only moving the map camera and yet the camera updated as if the user had moved
do we need to add the billing info? would it work without the adding the billing or payment method? i want to show places to user base on user location.
Yes for the directions api billing has to be enabled.
Great Video. One question though. Do we need to pay any fee to Google for using their APIs for background location?
Hi,
I believe the directions api is a paid resource.
hey, what are the map sdks and apis you activated for getting the google map api-key?
Hi, Take a look here pub.dev/packages/google_maps_flutter under the getting started section.
Great tutorial. So educative. Thanks a lot. Got a question though. What if I have a list of several points that don't exist in the map and I want to add them as markers for use in my app. I have a database containing names of new points and their coordinates. How do I use the database in code instead of writing the markers over and over?
Yes, you can.
Nice, As billing is necessary for polylines? Because I can display markers on Map but my emulator does not show me to set points and routes?
Good to know it worked out for you.
so to show road on google maps i should pay ??
Is place api is paid
Brooooooo, is it everything about flutter you know, anything i search concerning flutter your video comes first, thanks. I just subscribed to your channel. Please be my mentor.
Thanks for the comment. I am trying to create good quality content related to Flutter. Good to know you like it. Awesome
Thanks for your effort but sir I am using Android studio will it still work out for me sir...Thanks
Yes it should.
Hello Hussain,thanks for this tuto,clear and straightforwad 👏👏I have a doubt though,how about drawing the route from the current location to a target location? I Tried to do it with this approach but did not get the desired result
Hi, thanks for the comment. I wouldn't recommend constantly re rendering the path using the approach mentioned in this video as it will become very expensive both computationally and monetarily. You would have to research on this and come up with a new solution.
hey if you find any solution regarding your problem please let me know because i m looking for same approach
Thank you@@m_hussain_mustafa
hi ive benn watchingyour dart and flutter udemy course ,can i follow this video after that course ...is this video beginner friendly
if your making future yt videos too please keep in mind that most of your viewers are from your udemy course ,so pls make videos which they can follow ....
loved your course thanks
Yes, absolutely. This tutorial video can be followed easily as long as you know basics of Flutter.
Hi there! I had a question, I took the source location and destination location in two different cities 10 hours apart. What is happening now is that the polyline is not following the road, and is skipping the small turns in the directions (I feel like it is probalby because of less number of coordinates in the list. If that's the case, how can I increase the number of coordinates generated?).
Hi,
I'd honestly recommend taking a look at the documentation for these packages. That would be the best course of action as I can't recommend something of the top of my head.
i did the same as you said in video . but sometimes maps loads and sometime it crashes the app . the error is java.lang.IllegalStateException: Platform view hasn't been initialized from the platform view channel.
I'd recommend searching your specific issue on the internet. I haven't encountered this error, while developing the application myself.
Hello Hussain thank you for the vid!
I tried to follow your footsteps on this video but running the flutter app from the flutter terminal and using chrome. I faced the following error tho: "Cannot read properties of undefined(reading 'maps')". Have you ever seen this error?
Hi,
I belive for running the Flutter on the web there might be some additional steps not mentioned in this video. Your best bet would be to look at the documentation for Google Maps and specifically the section for running maps on the web.
@@m_hussain_mustafa in the video which android emulator are you using? Thank you!
@@reicaio I use a pixel 7 simulator.
Love the course, I have 2 issues and they may be related. Did any one have a problem where it just says my location is at google head quarters and not at my actual location, and second, when i open location setting, I can not add addresses like Hussain can. It just does nothing. Any help would be greatly appreciated
Hi
For the first issue I would recommend first determining if you can actually access the users location on device, and then if that is working then make sure that the gps settings on device are set so that they simulate a moving car this should hopefully help you fix the first issue. For the second issue I honestly have no idea but I'll recommend to update your Android Studio IDE to the latest version, then create a new simulator (I use a Pixel 7 - API 34) and hopefully this might fix the second issue.
i have a question though.
i want to build an app which retrieves lat and long from an API and marks the location on the map but i honestly don't know how to start could you help me?
You can use the geolocator package or the API you mentioned to get the lat long, and then use these coordinates to plot a point on the google maps or any other map provider plugin that you'd like to use for Flutter.
Okay I will do that thanks a lot
did u use real google api key or continue with the dummy one ?
Hi,
Yes you require a valid api key.
Is it possible to find the shortest road between two points on a map in firebase
Yes it should be possible but you’d have to look at the documentation of the plugin.
Does the direction polylines feature require a paid cloud console account? Thanks
I have tried with free account but i have an error (Exception : Unable to get route: Response ---> REQUEST_DENIED)😢
I believe you need to enable the directions api which also requires you to enable billing.
@@m_hussain_mustafa do you mean billing is about payment?
iam getting following error:
Error (Xcode): Building for 'iOS-simulator', but linking in object file (/Users/Comma/Flutter-projects/emergigo/ios/Pods/GoogleMaps/Maps/Frameworks/GoogleMaps.framework/GoogleMaps) built for 'iOS'
Error (Xcode): Linker command failed with exit code 1 (use -v to see invocation)
can you please help?
i am also getting the same error . Just delete the ios folder from project and then from terminal run "flutter create " it will solve your issue . or Check your Flutter SDK path (Xcode -> File -> Workspace settings -> correct your derived data path ). These steps hepled me to overcome from this error.
What if i want to add 2 or more stops between origin and destination?
That should be possible with a little modification to the code. You can first display the 4 different points on the map, and then generate a path between them the same way you did for 2 points.
use places api too
@11.03 sir , i tired to update the kotlin version to 1.9.0 . But still i couldn't execute my code. It still says newer version of kotlin grade plugin. Please help
Was the issue resolved.. I am getting the same error
hello 👋👋. I am getting request denied exception at point of implementing the polylines. Direction API is enabled by the way. Thanks for helping!
can u plz tell me the sol ?
the error occur at 5:47
cannot read the properties of undefine(read"maps)
The best course of action might be to download the source code and compare your code with it.
@@m_hussain_mustafa wasn't able to download. I tried several times when going through the tutorials.
@@kashaf8863 what is the actual problem you are facing
@@m_hussain_mustafa is there something extra to be done at the cloud side?
I am unable to display google maps on android emulator.
when i try this i get: Controller was disposed before GoogleMap was ready. as an error, any idea how to fix this?
Is the controller initialized properly? Are you disposing the controller somewhere else besides the onDispose lifecycle function?
routes not displaying on the map why is this method billing adress issue?
You need to enable billing api on your Google cloud project.
@@m_hussain_mustafa ok thank you
This was really a video that I wanted. I want to use the same API's for my college project so is it free or will I be charged for it? I don't have to use it frequently, it will be just for the project sake
The Google Maps API is free for up to a certain amount. After that you would be charged but for a college project it likely won't go above the quota. You will still have to provide a payment method though.
@@m_hussain_mustafa Thank you for the answer :)
does this work in flutter web as well?
i had a problem i cannot run flutter if i pub get location dependencies
Hi,
I don't understand what your issue is?
Even though I use your source code, I get the following error.
TypeError: Cannot read properties of undefined (reading 'maps')
You need to configure Google maps api keys correctly within the project and Google console for the code to work.
after setting all the necessary parameters of google map I tried to run the app and showed in the the screen this message : flutter application won't run without Google Play services, which are not supported by your device
You need to create an emulator which has google play services installed on it. Check for the play store icon on emulators available to you in android studio and try to create one from that. Hope this helps.
@@m_hussain_mustafa it has the play store icon in android studion but still not displaying even I'm setting all the things for google map , in executing the dcreen stays white the map not working ,this problem stops me i searched everywhere but still not finding solution💔
Can we show street view in flutter apps?
Hi, i don't have experience with this, but maybe take a look at documentation or google.
@@m_hussain_mustafa ok thanks
error occur when i run app at 5:47 error is:
cannot read the properties of undefine (reading "maps")
how can i solve it?
I believe the variable you are trying to access it not assigned a value properly. I'd recommend downloading the source code and comparing your code with it.
@@m_hussain_mustafa ok will try again and thanks for reply
@@m_hussain_mustafa error resolved
kotlin version issue is not solved yet I update the version but still facing error?
I believe you'll also need to upgrade your Android SDK and NDK version on your system.
@@m_hussain_mustafa i update every thing flutter upgrade android tudio complete with latest packages and sdks but kotlin version issue not solved yet location package causing this error "Execution failed for task ':location:compileDebugKotlin'.
> A failure occurred while executing org.jetbrains.kotlin.compilerRunner.GradleCompilerRunnerWithWorkers$GradleKotlinCompilerWorkAction" "C:\Users\user\AppData\Local\Pub\Cache\hosted\pub.dev\location-5.0.3\android\src\main\java\com\lyokone\location\FlutterLocationService.kt: (302, 23):"
When I change it traveling mode to bicycle then PolylineResult zero values and it's an error. kindly check.
Exception has occurred.
_Exception (Exception: Unable to get route: Response ---> ZERO_RESULTS )
Hi,
I believe PolylineResult might not be displayed for bikes as they might sometimes go over terrain thats other than roads.
im not able to view the map, no errors, is it require google api keys
Yes you need to add the required Google Maps API Key as specified in the video. You can learn more about how to get the key here: pub.dev/packages/google_maps_flutter
@@m_hussain_mustafa but your not added in ur video Google cloud console Google api keys
@@rakshithgowda8782 I showed where the key needs to be added. I cannot show my own key as that needs to be kept private.
😊😊😊
zoom button and Google log are showing but the map not showing help me
Have you checked the debug console for any errors?
I'm getting this error...
TypeError: cannot read properties of undefined (reading 'maps')
How to rectify it
Hi,
I'd require more of the stack trace to determine what the issue is.
Can you please help me in generating api key 😭😭😭😭
Does api key requires a billing account??
Polylines are not generated on the map....is it the problem in code? Or api key please please help.... I'm working on my college project
Its really helpful video for new flutter developers.
Thanks for the video. But I am getting an issue on this line (Exception has occurred.
_Exception (Exception: Unable to get route: Response ---> REQUEST_DENIED) for PolylineResult result = await polylinePoints.getRouteBetweenCoordinates(
can you help me on this.
You need to enable the billing api in your Google cloud project for Google maps and enable the directions api.
Is necessary to enable billing for place api@@m_hussain_mustafa
is the google map api and the google direction api same or different?
i got a google map api without any cost
if the direction api is not the same then is that free or costly?
i am making a application for my college Project i need to know is getting a api of google is free or costly .
i don't have much money i am already out of money because of the fee in college 😂😂
if it costly is there any other map contains the route visualisation for free?
please reply
They are different APIs.
@@m_hussain_mustafa is it costly?
Puedo indexar a google search console un my maps
Gracias
I am doing exactly what u did in the video, but i dont get a map. Instead I get a white screen
Hi,
Any errors logs that you can share?
genius i want to code like him
but how
Thanks for the compliment. Practice makes perfect. I was once in a similar position as you.
When I enter the location at the beginning, the map does not appear, can you help me?
Hi, have you compared your code with my code by downloading it? Are there any error logs?
Same
I checked mine I had problem that i dint delete the ios file, since api key generated is common for both android and ios and i was working with android
same here anyone got an idea how to rectify it
It is paid, can't do it by free??
💞💞🥰🥰❤️❤️❤️❤️❤️❤️❤️❤️
Thank you for your support.
The Api map is free ?
Up to a certain limit it is free.
Who loves flutter?🙋🙋🙋
I do.
11:03 it let me use kotlin 1.7.10 - guess later on I will find out why that wont work but I already had a kotlin headache I am leaving well enough alone for the moment!@!!
Good that it worked for you.
i still dont understand why you d not give us the source code
Hi,
The source code link is in the description.
Is place api is paid
Yes it is paid.
@@m_hussain_mustafa is any alternative for this key.
@@m_hussain_mustafa please if its possible for you give API key I am a student and for final year project integrate Google map for this i need api I don't have such money to buy it plz help if it's possible
A suggestion: Talk a lil bit slow.
Thanks I'll keep this in mind for the future.
share source code please
Source code link in description.
@@m_hussain_mustafa death link :(
I am getting this error, don't know why: E/flutter ( 9725): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Exception: Unable to get route: Response ---> REQUEST_DENIED
same
did you fix it?
@@jerrypante8048 Yes, I fixed it. To fix this issue you need to enable Direction API in your Google Cloud console, and enabling this API needs billing info.
Did you fix it?
Is place key is paid
its really amazing video , very helpful thanks a lot
Glad it was helpful!