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

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ต.ค. 2024

ความคิดเห็น • 183

  • @dakevs
    @dakevs 3 ปีที่แล้ว +16

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

  • @SumitSharanSatsangi
    @SumitSharanSatsangi 3 ปีที่แล้ว +8

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

  • @faisal0paz
    @faisal0paz 3 ปีที่แล้ว +2

    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

  • @iqratariq8610
    @iqratariq8610 2 ปีที่แล้ว +2

    Hi Marcus, nice tutorial. Can you please solve this error?
    {
    "error_message" : "Invalid request. Missing the 'destination' parameter.",
    "routes" : [],
    "status" : "INVALID_REQUEST"
    }

  • @adityahiranwale1279
    @adityahiranwale1279 3 ปีที่แล้ว +3

    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
      @abuhurairah5046 5 หลายเดือนก่อน

      same issue here any solution you got?

  • @FelexAndVirginia
    @FelexAndVirginia 3 ปีที่แล้ว +1

    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)

  • @samsingh0
    @samsingh0 2 หลายเดือนก่อน +1

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

  • @julesmercado4769
    @julesmercado4769 3 ปีที่แล้ว +2

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

  • @deepapandey849
    @deepapandey849 3 ปีที่แล้ว +2

    the tutotial is awsm, but why isn't the polyline showing up?!

  • @luis96xd
    @luis96xd 10 หลายเดือนก่อน +2

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

  • @thomasgomes118
    @thomasgomes118 3 ปีที่แล้ว +1

    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
      @nnelg.t1232 3 ปีที่แล้ว

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

  • @niklaswerthner1349
    @niklaswerthner1349 3 ปีที่แล้ว +2

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

  • @Dragon878787878
    @Dragon878787878 3 ปีที่แล้ว +1

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

  • @JasperLand
    @JasperLand วันที่ผ่านมา

    This package doesn't use the google maps API it's using the google Android SDK and google IOS SDK.
    The reason I'm calling out this difference is because maps api is unlimited, android sdk and ios sdk have limits to how many requests (currently $200 worth per month at the time I'm writing this) that you can have on your key.

  • @bars_expression6406
    @bars_expression6406 3 ปีที่แล้ว +4

    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.

  • @ahmdhakimali4179
    @ahmdhakimali4179 2 ปีที่แล้ว +1

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

  • @jacobdedman4015
    @jacobdedman4015 2 ปีที่แล้ว +1

    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
      @jacobdedman4015 2 ปีที่แล้ว

      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

  • @strangecat6082
    @strangecat6082 2 ปีที่แล้ว +1

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

  • @joshuawarurii3876
    @joshuawarurii3876 3 ปีที่แล้ว +2

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

  • @chuxville11
    @chuxville11 3 ปีที่แล้ว +4

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

  • @리사리사진라면
    @리사리사진라면 3 ปีที่แล้ว +1

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

    • @dujemandalinic5468
      @dujemandalinic5468 2 ปีที่แล้ว

      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.

  • @shoeswholesalerforreseller7633
    @shoeswholesalerforreseller7633 3 ปีที่แล้ว +1

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

  • @muhammadawaisawan9791
    @muhammadawaisawan9791 3 ปีที่แล้ว +1

    bro its really good video but i have some problems in my code,
    whenever i try to initialize MARKER it give me an error because of null safety, but it is not giving this error to you.

    • @umerasrar8321
      @umerasrar8321 3 ปีที่แล้ว

      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.

  • @flutterdev7203
    @flutterdev7203 2 ปีที่แล้ว +1

    5:08
    _destination = null;
    Cannot be performed as the error comes
    'A value of type Null cannot be assigned to a variable of type Marker'

    • @gideonboagontshonyane5473
      @gideonboagontshonyane5473 2 ปีที่แล้ว

      Hey mate, how did you fix that error? I am facing it too

    • @AbrarKhan-lo9fx
      @AbrarKhan-lo9fx 2 ปีที่แล้ว +1

      @@gideonboagontshonyane5473 Try _destination = null as Marker;

  • @shanglee643
    @shanglee643 3 ปีที่แล้ว +3

    dang bro, you go super god mode right now.

  • @UniformDelta00
    @UniformDelta00 27 วันที่ผ่านมา

    You didnt secure your keys in the GCP with SHA1 and Bundle ID

  • @fatihyilmazz
    @fatihyilmazz ปีที่แล้ว

    When I exceed 40,000 requests, it will not automatically deduct money from me, right?

  • @catalyysst
    @catalyysst 2 ปีที่แล้ว +7

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

    • @이준명-b8r
      @이준명-b8r 2 ปีที่แล้ว

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

  • @abuhurairah5046
    @abuhurairah5046 5 หลายเดือนก่อน

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

  • @thomasmabika7291
    @thomasmabika7291 3 ปีที่แล้ว +1

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

  • @AboodTube
    @AboodTube 2 ปีที่แล้ว

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

  • @wdmpk1
    @wdmpk1 2 ปีที่แล้ว

    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')

  • @seven-tq7jr
    @seven-tq7jr 2 ปีที่แล้ว

    "(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?

  • @bambanx
    @bambanx 3 ปีที่แล้ว

    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

  • @sirlegui9268
    @sirlegui9268 2 ปีที่แล้ว

    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

  • @fausto.ospina
    @fausto.ospina 3 ปีที่แล้ว

    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

  • @JimmyQuy
    @JimmyQuy 3 หลายเดือนก่อน

    why I can't see google map on IOS simulator?

  • @josecorona63
    @josecorona63 ปีที่แล้ว

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

  • @Calvin-ok1pg
    @Calvin-ok1pg 2 ปีที่แล้ว

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

  • @ahkstudio1566
    @ahkstudio1566 2 ปีที่แล้ว +1

    Can you add multiple destination polyline points?

  • @angelc5022
    @angelc5022 3 ปีที่แล้ว +5

    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 :)

  • @unknownprogramme
    @unknownprogramme 5 หลายเดือนก่อน

    how you create this 3D intro of mobile

  • @alexyan7245
    @alexyan7245 3 ปีที่แล้ว +2

    Hello, Marcus thank you for the tutorial, I have tried your source code, and it's not showing the polyline and the distance and the duration?

    • @MrAvelino2010
      @MrAvelino2010 3 ปีที่แล้ว +1

      Facing same problem. I suggest use MapBox direction api, to draw a route we need the set of points to draw route, MapBox give us for free, also give duration and distance. Google maps direction api JSON returned is different from MapBox direction api but they have commun things.

    • @surajshrestha5761
      @surajshrestha5761 3 ปีที่แล้ว +1

      @@MrAvelino2010 can you send the code?

    • @fahadpn4350
      @fahadpn4350 3 ปีที่แล้ว

      I too had the same issue

    • @fahadpn4350
      @fahadpn4350 3 ปีที่แล้ว +1

      @@MrAvelino2010 brother can you send the changed source code?

    • @fahadpn4350
      @fahadpn4350 3 ปีที่แล้ว

      @sameh ali did you find any solution?

  • @BhuvanTech
    @BhuvanTech 3 ปีที่แล้ว +1

    for me polyline are not showing

    • @AnkitMishra-th6gb
      @AnkitMishra-th6gb 3 ปีที่แล้ว

      enable the google route api from your google account, and also add the billing info their.

    • @lylephillips6456
      @lylephillips6456 2 ปีที่แล้ว

      @@AnkitMishra-th6gb Hello are refering to directions api bc theres no route api in cloud console. Please can assist me im also not to draw the polyline eventhough i get and decode the polyline string. Also i have a billing account and directions api enabled

  • @AshikShaheed
    @AshikShaheed 5 หลายเดือนก่อน

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

  • @boulahnamohammed7697
    @boulahnamohammed7697 ปีที่แล้ว

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

  • @陳宇泰-d2s
    @陳宇泰-d2s 3 ปีที่แล้ว

    my app only shows the total distance, duration, and polyline on the initial build. When I set a new origin and destination, it can't set the destination, which the DirectionsRepository.getDirection ==> reponse.statuscode failed. It only works when I wipe data or rebuild the virtual device again. It may be a memory leak. Wonder you might have the solution to this problem. Overall, I highly appreciate your work and thanks for providing such quality work.

    • @BhuvanTech
      @BhuvanTech 3 ปีที่แล้ว

      for me it not showing polylines

  • @dailydanny8178
    @dailydanny8178 2 ปีที่แล้ว

    I wonder how can I solve the null-safety error... anyone who can updates plz link to me ..

  • @nazar6222
    @nazar6222 3 ปีที่แล้ว +2

    Thanks, it helped me in the project))

  • @sanskarjaiswal2133
    @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

  • @thelearnfrombasics
    @thelearnfrombasics 2 ปีที่แล้ว

    Hi Sir, so do you know how much this would cost monthly ?

  • @diabeticvirus374
    @diabeticvirus374 2 ปีที่แล้ว

    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

  • @BilalAli-ug5tw
    @BilalAli-ug5tw 3 ปีที่แล้ว +3

    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
      @muhammadbasitamin5829 3 ปีที่แล้ว

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

    • @BilalAli-ug5tw
      @BilalAli-ug5tw 3 ปีที่แล้ว

      @@muhammadbasitamin5829 What errors are you getting?

    • @fahadpn4350
      @fahadpn4350 3 ปีที่แล้ว

      @@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
      @apizcyril9479 2 ปีที่แล้ว

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

  • @bugrahanaydn5329
    @bugrahanaydn5329 2 ปีที่แล้ว

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

  • @usamatahir7153
    @usamatahir7153 3 ปีที่แล้ว

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

  • @aytunch
    @aytunch 3 ปีที่แล้ว +4

    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:/

  • @manny8156
    @manny8156 3 ปีที่แล้ว +1

    hey Marcus great video as always. is there a way to access the directions api for free?

    • @rawquesh
      @rawquesh 3 ปีที่แล้ว

      @@MarcusNg well, technically it's free 😅

  • @clemens7759
    @clemens7759 2 ปีที่แล้ว

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

  • @sulthanhasanalhakim3454
    @sulthanhasanalhakim3454 3 ปีที่แล้ว

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

  • @jasonkao5240
    @jasonkao5240 3 ปีที่แล้ว +1

    great video as always marcy (pronounced mar-quee)

    • @zuherabud744
      @zuherabud744 2 ปีที่แล้ว

      writing documentation for your comment hahah

  • @bibekgyawali
    @bibekgyawali 2 ปีที่แล้ว

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

  • @mojtabamoaiedi3673
    @mojtabamoaiedi3673 2 ปีที่แล้ว

    Thanks for tutorial please this learning with open map street 🙏

  • @jevinmatthew3137
    @jevinmatthew3137 3 ปีที่แล้ว

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

  • @LoveKumar-mm5wi
    @LoveKumar-mm5wi 3 ปีที่แล้ว

    Without pricing setup we can't hit direction API?

  • @mosala7001
    @mosala7001 3 ปีที่แล้ว

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

    • @mosala7001
      @mosala7001 3 ปีที่แล้ว +1

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

  • @harshrathi3843
    @harshrathi3843 2 ปีที่แล้ว

    Is the service of the google api being used in the video free?

  • @AbrarKhan-lo9fx
    @AbrarKhan-lo9fx 2 ปีที่แล้ว

    Hi, Marcus. Thanks for the video really amazing.
    my problem is that, the google map is showing in the body and I am getting this:
    E/BufferQueueProducer(14950): [SurfaceTexture-0-14950-0](id:3a6600000000,api:1,p:700,c:14950) dequeueBuffer: BufferQueue has been abandoned

  • @bompyryadh
    @bompyryadh 3 ปีที่แล้ว

    What is this language bro .java or paython ? 🙂

  • @Murtaza-Shiraz
    @Murtaza-Shiraz 2 ปีที่แล้ว

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

  • @kamleshdurgude2
    @kamleshdurgude2 3 ปีที่แล้ว

    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 TH-cam for request query.
    Thank you again.👍

  • @madhav3573
    @madhav3573 3 ปีที่แล้ว

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

  • @feysalmama8819
    @feysalmama8819 3 ปีที่แล้ว

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

  • @Pismice
    @Pismice 3 ปีที่แล้ว

    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 ?

  • @ananiamesfin1488
    @ananiamesfin1488 3 ปีที่แล้ว

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

  • @santoryu4689
    @santoryu4689 3 ปีที่แล้ว

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

  • @abdallahboucedraya
    @abdallahboucedraya 2 ปีที่แล้ว

    how to get traffic infos with direction API ?

  • @jeffrey8224
    @jeffrey8224 3 ปีที่แล้ว

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

  • @TheThunderize1994
    @TheThunderize1994 3 ปีที่แล้ว

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

  • @mudasirkhan8058
    @mudasirkhan8058 2 ปีที่แล้ว

    I have an issue return type null

  • @juangonzales6405
    @juangonzales6405 3 ปีที่แล้ว

    hi api no function, only have 5s for use

  • @4030yes
    @4030yes 3 ปีที่แล้ว

    the map not displayed on my emulator :(

  • @khoerulumam8316
    @khoerulumam8316 2 ปีที่แล้ว

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

  • @sonmangaking
    @sonmangaking 3 ปีที่แล้ว

    Dope again Marcus how do u make ur beginning video animations

  • @raymondmichael4987
    @raymondmichael4987 3 ปีที่แล้ว

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

  • @kamalpreetsingh7777
    @kamalpreetsingh7777 2 ปีที่แล้ว

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

  • @helaolange
    @helaolange 3 ปีที่แล้ว

    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?

  • @whoman7930
    @whoman7930 3 ปีที่แล้ว

    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
      @krosf 3 ปีที่แล้ว

      Error Lens

  • @flutterdelux
    @flutterdelux 3 ปีที่แล้ว

    how to get API KEY ?

  • @gdhanush614
    @gdhanush614 2 ปีที่แล้ว

    Lateinitialized error occured what to do

  • @klkakeklkake4871
    @klkakeklkake4871 3 ปีที่แล้ว

    Amazing tutorial for ivorian young man who learn fultter.

  • @ek41319
    @ek41319 2 ปีที่แล้ว +2

    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
      @fernsit5014 2 ปีที่แล้ว +1

      Use distance matrix api

    • @ek41319
      @ek41319 2 ปีที่แล้ว

      @@fernsit5014 Thanks ya

    • @daumienebi
      @daumienebi 2 ปีที่แล้ว

      @@ek41319 were you able to get it done?

    • @gabriel-adrianstaicu4544
      @gabriel-adrianstaicu4544 2 ปีที่แล้ว

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

    • @ek41319
      @ek41319 2 ปีที่แล้ว

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

  • @ubuntulinux8985
    @ubuntulinux8985 3 ปีที่แล้ว

    how can i enable alternatives to true?

  • @runningsky
    @runningsky 3 ปีที่แล้ว

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

  • @The_flu.tter_guide
    @The_flu.tter_guide ปีที่แล้ว

    Is the api for free?

  • @kentthomas1045
    @kentthomas1045 3 ปีที่แล้ว

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

  • @mediumsitompul6914
    @mediumsitompul6914 ปีที่แล้ว

    Great...

  • @esrayildirim3431
    @esrayildirim3431 3 ปีที่แล้ว

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

  • @lina238_
    @lina238_ 2 ปีที่แล้ว

    i want to change the default country to Algeria how can I do it

    • @ddritchie
      @ddritchie 2 ปีที่แล้ว

      get the coordinates

  • @GrantjAcobs10
    @GrantjAcobs10 3 ปีที่แล้ว

    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.

  • @spydalison
    @spydalison 3 ปีที่แล้ว

    Just out of curiosity, which program did you use to make this presentation on your cell phone with the application