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

» Flutter courses, writeups, and source code on Launch Club 🧠
drp.li/Iq9Bk
» Flutter Job Board 👋
drp.li/T9bLq
Learn 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 camera.
Note: When you add a billing account to your project for the Directions API, you also get $200 in credit that gets applied to your account every month. That's 40,000 free calls ($0.005 per request for the first 100,000 requests) for the Directions API.
"For each billing account, for qualifying Google Maps Platform SKUs, a $200 USD Google Maps Platform credit is available each month, and automatically applied to the qualifying SKUs."
More info here: developers.google.com/maps/do...
» Remember to like, subscribe, comment, and share this video!🚨
kzbin.info?sub_...
» Socials📱
GitHub: github.com/MarcusNg
Twitter: / marcuslng
» Resources 📂
Complete Source Code: github.com/MarcusNg/flutter_g...
Dio Package: pub.dev/packages/dio
Flutter Polyline Points Package: pub.dev/packages/flutter_poly...
Google Maps Package: pub.dev/packages/google_maps_...
» Timestamps 🕒
00:00 Flutter Google Maps Tutorial Introduction
00:49 Pubspec Packages
01:12 Google Maps API Key
01:34 Google Maps Setup Android and iOS
02:00 Adding Our Map
02:45 Animate Map Camera to Location
03:31 Add Map Markers by Long Pressing
05:29 AppBar and TextButtons
06:00 Google Directions API - DirectionsRepository
07:21 Directions Model - Parsing JSON
08:36 Get Directions Info
09:09 Animate Map Camera to LatLngBounds
09:24 Distance & Duration Container
09:49 Display Polylines / Route
10:13 Recap
10:44 Thanks for watching 🙏
» Music 🎶
[NCS ( / nocopyrightsounds )]
Endless - Marin Hoxha ( / marin-hoxha )
Joakim Karud ( / joakimkarud )
#Flutter #FlutterGoogleMaps #FlutterTutorial

[@dakevs]

Honestly bruh I'm only 40 seconds in and I'm already a like smasher & subscriber. Thanks for all you do!

[@luis96xd]

Wow, this was such a complete and helpful tutorial, everything was well explained, thank you so much! 💯

[@chuxville11]

Thank You Marcusng for this one...This is Super-Helpful

[@shanglee643]

dang bro, you go super god mode right now.

[@hasankemalturk4416]

The best maps tutorial ever :)

[@cr3amyn3ll66]

Very good video! Helped me a lot

[@nazar6222]

Thanks, it helped me in the project))

[@AbdullahAdelx]

Awesome tutorial Thank you very much !

[@thedeadcode5983]

Thankyou for an amazing tutorial!

[@shoeswholesalerforreseller7633]

Man!! You saved my life❤️

[@mzolisidywili2230]

The best one yet, Thank you so much! Don't forget to put [bounds][northeast] if bounds are null in the get Directions

[@user-uc6uc3tk1m]

I want to know how you solved this problem! can I get some code or comments?

[@kamalpreetsingh7777]

Hi, great tutorial apart from that how to track the route live from one place to another and thank you.

[@joshuawarurii3876]

If there was love button i would also press it.....thanks bruh you inspire alot

[@klkakeklkake4871]

Amazing tutorial for ivorian young man who learn fultter.

[@bars_expression6406]

Nice video, learnt a lot from your channel. Can you please make a tutorial on how to write and read video files with firebase, since there not enough tutorials online to learn to handle videos? And videos are an essential feature of most apps.

[@2099Ai]

amazing video mannn!!

[@promaidsdeveloper2000]

This is awesome 🙌🙌

[@tuyenvan382]

Thanks you. For this video

[@thomasmabika7291]

hey Marcus, great video as usual. But how about some animations man? A whole video on some top level, cool looking animations?

[@hashankannangara8723]

Great video !

[@raghadfahad211]

I love it!

[@berkbugur]

very helpful thank you

[@Apepsusnendar]

thank you Marcus for your video

[@frankellyguzman4297]

Thank you for real man ♥

[@walkmandede5958]

Really Thanks alot sir ...

[@mojtabamoaiedi3673]

Thanks for tutorial please this learning with open map street 🙏

[@robertosousa2418]

Nice perfect !!!

[@raymondmichael4987]

Thanks for this. Is it possible to add makers on the map and make them connected using this api, what needs to be changed?

[@dewas6237]

awesomeee!

[@niklaswerthner1349]

How do you do the step 'open Xcode' in Android Studio in windows? Thanks!

[@Dragon878787878]

thank you Can you make a video explaining about ARCore Augmented Faces by flutter

[@user-nb9kd6yp2j]

what is the route and polyline based on? is it the shortest route? or what logic is the polyline is drawn off of

[@vicsystems]

I love ur vibe smashed d like button after 30seconds

[@kamleshdurgude2]

Hello sir, Thanks you so for such a nice video. It was very helpful for me. I have one request. Could you please create a video on How to search Hotels restaurant coffee shops or any Point of interest along the route which we drawn on the map. Please if you create that video it will be very helpful for many people. There is not a single video available on KZbin for request query. Thank you again.👍

[@kentthomas1045]

Is there a way to make the choices permanent unless reset by a button on the screen?

[@jasonkao5240]

great video as always marcy (pronounced mar-quee)

[@zuherabud744]

writing documentation for your comment hahah

[@khoerulumam8316]

Great! How to add search form input? Any documentation?

[@josecorona63]

Hello, is there any way to set indications to the Exactly same Route Polylines? Like Navigation SDK google, but without the SDK

[@shoeswholesalerforreseller7633]

Could you please make tutorial on state management in flutter..?? Love from India

[@AboodTube]

help, I'm definitely starting to get the hang of it. Just thought I'd share.

[@julesmercado4769]

Hi Marcus, is it possible to make this update to null safety?

[@santoryu4689]

Thank you for your great effort in this beautiful design I hope you clone Uber app with flutter and thank you

[@mediumsitompul6914]

Great...

[@ahmdhakimali4179]

Hi Sir, all went good but at last routes returning null and polyline doesn't show up, kindly help what should I do ???

[@esrayildirim3431]

With which program do you use for the beginning of your videos?

[@ahkstudio1566]

Can you add multiple destination polyline points?

[@liorpolak1391]

Fantastic

[@varunlohade383]

I am buying your course!!!

[@whyineedthis343]

Thx bro (:

[@siddheshshinde4850]

Cool Video

[@diabeticvirus374]

4:05 im doing realtime tracking on users that are connected to my app , the probleme is that i can t add the origin and destination their

[@TheThunderize1994]

Is it possible to add polylines if I have multiple markers and not just 2?

[@sonmangaking]

Dope again Marcus how do u make ur beginning video animations

[@FelexAndVirginia]

How can you hide Google cloud apiKey if publishing code on github? Or how can i restrict apiKey to be used by only flutter app(ios android web)

[@Pismice]

hello nice video, i see that few seconds after 3:25 your google maps seems "buggy" i have the same issue with road getting "biggers" and "blurry", did you find and fix or is it normal while using an emulator maybe ?

[@faisal0paz]

someone have the same proble than me? i cant make the condition : "_destination != null" it says that MArker cant be nulleable and always will be true. help please! nice tutorial

[@clemens7759]

Hi, is there a way to only diplay one certain country and not show all the others?

[@jeffrey8224]

The constructor being called isn't a const constructor. Try removing 'const' from the constructor invocation. Im getting this error

[@fausto.ospina]

hello i have this error A value of type 'Null' can't be assigned to a variable of type 'Marker'. Try changing the type of the variable, or casting the right-hand type to 'Marker' you helpme please

[@bibekgyawali]

Is there any way we can get the current device latitude and longitude?

[@seven-tq7jr]

"(projectname) wont run without google play services , which are not supported by your device", i enabled the maps sdk for android api though, any help?

[@Calvin-ok1pg]

Hi Marcus.. you know in Google map.. I can 'reorder' each location. How do or where do I go and get that tutorial? Thanks.

[@strangecat6082]

How do you make that beautiful animation at the beginning??

[@aytunch]

thanks for this great tutorial however it is a shame that we still can not use widgets, the integral part of Flutter, as markers and we are limited to some rasterized images as markers. I will not use Google Maps until they support this. I don't want my app's map to look like it is from 2012:/

[@sulthanhasanalhakim3454]

hei, i have problem setstate is not defined, can i get help of this error ?

[@bugrahanaydn5329]

hi, anyone know how to integrate waypoints ?, ım having a troble while trying it

[@sirlegui9268]

Working on this on Flutter Web, can’t get to show the Polylines on web, is working in iOS and Android but not web. Gets the info correctly but doesn’t show Polylines

[@amjadhaffar4594]

you saved me

[@LoveKumar-mm5wi]

Without pricing setup we can't hit direction API?

[@abuhurairah5046]

routes not created when we add one destination and origin polyine above 0 , 0 is showing why?

[@usamatahir7153]

There isn't .env.dart file in lib directory. Anyone can share?

[@sanskarjaiswal2133]

i am not able to make .env.dart file in lib and polyline and time and distance is also not showing can you please help

[@madhav3573]

Hii bro liked all your video, I want to ask is there any charges to enable direction api of google

[@ananiamesfin1488]

How did u get this amazing, your tuts are marvelous, I even unsubscribed and subscribed again.

[@ubuntulinux8985]

how can i enable alternatives to true?

[@abdallahboucedraya]

how to get traffic infos with direction API ?

[@feysalmama8819]

is it necessary to add billing account to use API key ?

[@bambanx]

Thanks you for the vid, can you give me a hand? How i can show places based on a database nearby to your location? I mean i press center location and show me nearby places based on ratio example:50km and display store iof clients i have on a db? For Any guide or light thanks you so mucj

[@ek41319]

Hi, Marcus. Thanks alot for having this video as its super helpful and useful!!! Do you mind to guide me how can i get the distance between 2 markers in double please? As per your video, im able to get “distance km” which is in string only… Your time and advice is highly appreciated… Have a great day ya

[@fernsit5014]

Use distance matrix api

[@ek41319]

@@fernsit5014 Thanks ya

[@daumienebi]

@@ek41319 were you able to get it done?

[@gabriel-adrianstaicu4544]

Did you manage get it working? Can you help me please?

[@ek41319]

Hi, i did not continue it ya... So sry cant help... :/

[@angelc5022]

Hi, thanks for this great tutorial. Is it possible to place the map in, for example, a container that uses just 1/3 of the screen? That way I could use the rest of the screen to place some other information :)

[@pedroalbertobarriosmolina5979]

wrap the Google Map in a container o sizebox widget and set de height

[@SumitSharanSatsangi]

Hi Marcus, Can you please update the Github code to null safety version?

[@SofianeMez06]

Did u find it ?

[@boulahnamohammed7697]

I have a Question Please, I want to use google Maps API to get the user's current Speed, is it possible

[@whoman7930]

3:56 what is that extension that let us view the error and warning directly next to it, in vscode? Can you tell me?

[@krosf]

Error Lens

[@GrantjAcobs10]

Does anyone know if there is a limit to the number of custom markers on a map. I seem to be able to only display 6. If there is, does anyone know a workaround.

[@ahkstudio1566]

No limit i guess

[@wdavis6254]

When is the push notification coming?

[@AshikShaheed]

its a good video. but i wish to get help in errors that I get.

[@wdmpk1]

Any one here to help me please? There is a issue like below..Please help... The method 'animateCamera' was called on null. Receiver: null Tried calling: animateCamera(Instance of 'CameraUpdate')

[@mudasirkhan8058]

I have an issue return type null

[@jacobdedman4015]

I am having issues because GoogleMapController and Marker objects cannot be null. I was able to get around this issue for the GoogleMapController by adding the late tag in front of the declaration, but I cannot find a workaround for checking if the Markers are null. I get a warning that says they cannot be null so the comparison is always true when checking if != null. Anyone know a fix?

[@jacobdedman4015]

I fixed this by initializing the Markers to have position = LatLng(0.0,0.0) which is very far outside of the intended use area of the app I am building, and compare Marker.position to LatLng(0.0,0.0) instead of checking if Marker == null

[@user-ep3cf7sb5v]

Thank you very much. but I don't know how to use it applying null safety. Can you teach me the solution?

[@dujemandalinic5468]

Yes I got the same error. this is flutter null safety error. Try using // @dart=2.9 at the start of your main.dart file. it will solve null safety error.

[@gdhanush614]

Lateinitialized error occured what to do

[@mosala7001]

Thank you, but why the DirectionReposietry always returns with null, even I have enabled all needed service!

[@mosala7001]

Never mind, i printed the response and I must enable the billing :D

[@jevinmatthew3137]

dude its not showing polyline , distance duration pls help me soon

[@adityahiranwale1279]

Hey I have tried the same code from the video but the Polylines don't work I don't know why I've also tried taking the code from your repo also switched my api key with yours but still the poly lines don't show up I can't understand why can you please help me?

[@abuhurairah5046]

same issue here any solution you got?

[@helaolange]

Is there a way to see a live navigation of any object on maps? Let's say for example a car approaching me miles away?

[@AnkitMishra-th6gb]

did you find that?

[@BilalAli-ug5tw]

Thanks for the amazing tutorial Marcus, I tried this code and it worked well, but I want to know how can we add more destinations.

[@muhammadbasitamin5829]

Your polylines worked? am trying but my polylines are not working

[@BilalAli-ug5tw]

@@muhammadbasitamin5829 What errors are you getting?

[@fahadpn4350]

@@BilalAli-ug5tw I too had the same issue. When I checked google cloud console , all requests for directions API showed error with an error code 4xx,

[@apizcyril9479]

@@BilalAli-ug5tw sir can you share your code in github and appreciate it if you can answer these guys' questions

[@samsingh0]

Null safety is making this hell. I can't display my polyline because there's a million issues with nulls :/

[@thomasgomes118]

Hello, Can you help me? is giving this error. Because MAPGO depends on google_maps_flutter >=2.0.0-nullsafety which requires SDK version >=2.12.0-0 =2.0.0-nullsafety which requires SDK version >=2.12.0-0

[@nnelg.t1232]

Change your '"SDK version >=2.12.0-0 =2.11.0-0

[@Murtaza-ik8ub]

For anyone whose route is not displaying, make sure to link a billing account to your Google Cloud project.

[@dujemandalinic5468]

Really?? thats the problem??

[@demondfire1811]

plase help thier is error in const