Flutter Google Maps - Maps, Markers, Polylines, Places API & Directions API
HTML-код
- Опубликовано: 12 июн 2024
- Master Google Maps in Flutter: Comprehensive Guide to Google Maps Platform Integration. Discover how to integrate and harness the power of Google Maps in your Flutter applications. Explore the multitude of solutions provided by the Google Maps Platform, such as the Maps SDK, Places API, and Directions API, to display interactive maps, enable location search, and provide route guidance for your users.
🚀 Learn Flutter / Build Apps 👇
📖 Courses • www.atomsbox.com/courses
✍ Templates • www.atomsbox.com/templates
🧑💻 Bespoke app dev • www.atomsbox.com/develop
💾 GitHub • www.github.com/maxonflutter
00:00 Introduction
00:11 Setting Up Google Maps
01:40 Obtaining Android and iOS SDK Credentials
03:33 Exploring Google Maps Sample Code
05:18 Adding Markers to Your Maps
07:45 Drawing Polylines and Polygons on Your Maps
10:55 Implementing Location Search with Places API
19:05 Updating Marker Position and Drawing Polygons with Tap Interaction
23:20 Retrieving Directions Between Two Places Using Directions API
32:28 Adjusting Map Bounds Based on Directions API Results 
Наука
🚀Learn Flutter / Build Apps 👇
📖📱Courses • www.atomsbox.com/courses
✍📱Templates • www.atomsbox.com/templates
🧑💻📱Bespoke app dev • www.atomsbox.com/develop
Yes ...We want more about Gmaps..Thanks Man!!!
This video is the best yet between that I watched others about google maps.
Really very helpful video. Good job.. Lot of things to know in this video
Very very helpful, Im interested in learning about multiple users tracking within a boundary or route
I found "Gold" here, Thanks very much for the content, keep up the good work.
A job well done 💪🏽. You killed it man , this video really helped me a lot
You're the best yet! Thank you very much!😁😁
V/AudioManager(28155): playSoundEffect effectType: 0
E/flutter (28155): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: FormatException: Unexpected character (at character 1)
E/flutter (28155):
E/flutter (28155): ^
E/flutter (28155):
E/flutter (28155): #0 _ChunkedJsonParser.fail (dart:convert-patch/convert_patch.dart:1376:5)
E/flutter (28155): #1 _ChunkedJsonParser.parseNumber (dart:convert-patch/convert_patch.dart:1243:9)
E/flutter (28155): #2 _ChunkedJsonParser.parse (dart:convert-patch/convert_patch.dart:908:22)
E/flutter (28155): #3 _parseJson (dart:convert-patch/convert_patch.dart:35:10)
E/flutter (28155): #4 JsonDecoder.convert (dart:convert/json.dart:610:36)
E/flutter (28155): #5 JsonCodec.decode (dart:convert/json.dart:216:41)
E/flutter (28155): #6 jsonDecode (dart:convert/json.dart:155:10)
E/flutter (28155): #7 locationService.getPlaceId (package:flutter_application_silentresponder/location.dart:219:24)
E/flutter (28155):
E/flutter (28155): #8 locationService.getPlace (package:flutter_application_silentresponder/location.dart:228:20)
E/flutter (28155):
E/flutter (28155): #9 MapSampleState.build. (package:flutter_application_silentresponder/google_map.dart:83:35)
E/flutter (28155):
E/flutter (28155): please help to resolve this error if you know
Your tutorial has helped me a ton! Thank you so much for the excellent video!
Great to hear!
V/AudioManager(28155): playSoundEffect effectType: 0
E/flutter (28155): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: FormatException: Unexpected character (at character 1)
E/flutter (28155):
E/flutter (28155): ^
E/flutter (28155):
E/flutter (28155): #0 _ChunkedJsonParser.fail (dart:convert-patch/convert_patch.dart:1376:5)
E/flutter (28155): #1 _ChunkedJsonParser.parseNumber (dart:convert-patch/convert_patch.dart:1243:9)
E/flutter (28155): #2 _ChunkedJsonParser.parse (dart:convert-patch/convert_patch.dart:908:22)
E/flutter (28155): #3 _parseJson (dart:convert-patch/convert_patch.dart:35:10)
E/flutter (28155): #4 JsonDecoder.convert (dart:convert/json.dart:610:36)
E/flutter (28155): #5 JsonCodec.decode (dart:convert/json.dart:216:41)
E/flutter (28155): #6 jsonDecode (dart:convert/json.dart:155:10)
E/flutter (28155): #7 locationService.getPlaceId (package:flutter_application_silentresponder/location.dart:219:24)
E/flutter (28155):
E/flutter (28155): #8 locationService.getPlace (package:flutter_application_silentresponder/location.dart:228:20)
E/flutter (28155):
E/flutter (28155): #9 MapSampleState.build. (package:flutter_application_silentresponder/google_map.dart:83:35)
E/flutter (28155):
E/flutter (28155): please help to resolve this if you know
great v.tutorial! Would be nice to add autocomplete places example! Thanks!
helpful thanks,continue teaching !
Thanks, it helped me a lot.
nice video thank you so much 🙏🏼🙏🏼🙏🏼
Thanks for this wonderful content... ❤️❤️❤️❤️
Thanks for this video😊
When I enter my destination and click on it it takes me back to the home page but the progressDialog runs indefinitely. Nothing happens.
What is the problem please?
Not sure, cause it depends on your code! Which changes did you make?
Hi , very great job!
Hello, as seen in the video, the path between the two selected points seems to be broken. It appears on the buildings, etc. It is not quite right, how to fix this
Well done sir. It helped me a lot.
Glad to hear that
Hello , great job brother !
I want ask you about how to make Markers from Network images ( i mean both svg or png pictures from my server with a URL).
Any idea ?
Wow really interesting video sir
where have you been hiding yourself, I was searching a lot sources for this kinda video.
you are so cool!
Great one ...😉
For Directions , Places and Polylines, don't we need Billing Enabled?
Awesome! Where in the code you have polyline set to be under the street names, is there a setting for that in the code? I am asking after seeing any polyline i add ends up above street names, street signs, place names, etc.
Hi! Great video first of all! How could I show multiple users location via firestone by a marker in real time?
I can try to make a video about that in the future!
@@MaxonFlutter Best video, please make for multiple users with the route. Thank you bro
The method 'LocationService' isn't defined for the type 'MapSampleState'.
I'm getting this error for searching city
You are the BEST
Hello, thanks for the video. but does the application also show the current location?
Great tutorial
Thank you! Cheers!
Does Google maps provide public transport stops data? And can I enable showing stops by default. To add ability to click them
Hello! Is it possible to set a waypoint using this app to a device connected with bluetooth, ie an airtag?
How do i add marker to the destination as well
Perfect like every video that you have. Do you know how to getBounds ? I'm trying it but I can't do it. Thanks to share your knowledge.
how can we create like when user install our app, app will automatically fetch device info and with that data we how can show that perticular device image.
like assume i have two phone (1) Mi Note 10 pro (2) samsung s20
i installed app on both device i used DeviceInfo plugin and its showing device model but how can we setup that our app show device image according to model.
thanks
very useful
great video......
the best very helpfull codethe best very helpfull
Hi! Is there a way to only display a certain country?
Final string url which url you provide ,and how I get the url please reply
How to solve the CORS problem with the Distance Matrix API in Flutter web on the server side?
Do we have to make seperate billing account for maps and gcc ??
is that api url (at 14.14 )is constant for all project ?? please reply 'Max on Flutter' thankYou!
Please make a video on marker movement between two places along polylines
Okay, I will think about that for the future.
How to Rotate Google map view with Compass movement mean if we Rotate or move the device map also be rotated.
From where I got the url for polyline and. Direction in .. type in location service
Hi, great tutorial apart from that how to track the route live from one place to another and thank you.
Glad it was useful. I will make another tutorial to add the live route tracking.
@@MaxonFlutter great thanks for this
Great tutorial. Exactly what i needed
I am getting this error though.
Exception has occurred.
RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)
It occurs when I try to search for a different city that is Paris. I don't know why the code only works when I search Milan. Also when my Camera position animates, it moves to Nairobi city instead of Milan. Kindly assist on how I can manage this. Thank you.
Hi Max,
Thanks for your tutorial it's really helpful.
I've just got one problem : when I enter "Paris" in the bar of research for exemple, I have an error on the Console :
[ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: RangeError (index): Invalid value: Valid value range is empty: 0
#0 List.[] (dart:core-patch/growable_array.dart:281:36)
It may be caused by the code of the file location_service.dart, I don't know if you have an answer but I'll appreciate your help.
Thanks
Et moi, j'ai fait le même problem comme vous.
You must have billing payment to use Place API
It is happening because now google has made it compulsory to add credit card information to use their free service. So basically no JSON is being returned, hence the index 0 is empty as per the error. To fix it you must add credit card information.
I add email.and submit from your link.but no rep.how i get source code.i go through your link and add my mail
how do i add marker at the destination? thanks in advance
брат, от души спасибо
good job
Thanks
Is it possible to change the default language of google map in flutter?
When using places API I get an error and debugging I saw that I need to enable billing. is it now a paid API?
helpful :)
We would like to buy "Flutter Google Maps - Maps, Markers, Polylines, Places API & Directions API" source code, So, please advice Sir.
Guys - > the places api requires billing ! the android and ios sdk doesnt. Good video anyways.
Great video, any future plans for a completely full stack app?
what's the language he uses please? and where the Link of Github
What would you like to see in the full stack app?
@@MaxonFlutter Hello and thanks for the video!! In my case, I would like to learn how to get the updates in real-time with the directions API, so what I mind is that when I have to turn right or left, I want to be notified.
I think it would be cool to calculate the size of a selected poly line area on a map. Like if you were quoting a concrete driveway.
Is there a way to display suggestions below the search text field as the user starts to type in the city name??
Yeah of course, you should check my series about a Food Delivery App. In one episode, I show how to display the suggestions as you wish.
Thank you so much
You’re welcome! How are you using Google maps in your flutter apps?
@@MaxonFlutter Yes! It's my first time working with Flutter, so your video was very very useful for me
How to add autocomplete feature in this code bro ?
Is the sdk for google map service free to use in production deployment?
Does it require any type of subscription?
Hi Majed! To use Google maps, you have to enable a billing account on Google cloud, and you’ll pay based on the usage.
14:30
Where did you get that url, you give no url in the comments, no copy/paste in the description, you give no clue as to where to get it, please give some more info on where to get that
I had an error running on android, it said that it didnt had the api key when i put it just as instructed in the video but reading the instrunctions on the pub.dev page it said that the metadata label had to go on the aplication label instead of the activity label and that solved for me. Hope this can help someone with the same error
Thanks for explaining that here. I guess it might have changed since I released the video.
Thanks, this resolve the issue of the map not appearing for me when i ran the code as per the instructions
Hi
Can you please tell me
How can visible all info window on google map without tap
Actually I need this
Any possibility to show this
Does this also run on the web?
hi in the 32:12
The operator '[]' isn't defined for the type 'Future'.
Try defining the operator '[]'
problem i having
i restart vscode
i have not output , only page only visible but map is not visible , pls solve my problem
In 15.54 after typing milan and click search button there was an exception error (var place id = json [`candiate] [0]
It tells valuwe range is empty invalid value its range error
Also it not show the debug console printed pace id.
When we typing milan code working and print in console.after click search button it gives range error higliting the 0 in get place id
Same problem for me, did you fix it?
Or is there someone who fixed it?
Not sure if you'll see this, but whenever I restart the app after adding the API like you did at 15:50, it simple shuts down and says "Unable to connect to VM at *link* WebSocketChannelException: WebSocket connection failed. I've updated all of the dependencies and the SDK for googleMaps, but it still shuts down with the same error each time. Any idea how to fix this?
In case anyone else runs into this issue, the simulator device that you use does affect the results, e.g., I was using an iPhone 8+ as a simulator but after swapping the the iPhone 13, it's no longer a problem.
Awesome video!
I'm a lil stuck, everything was going well until 4:50, my screen is just white at this point
me too. any solutions?
Hello! Great video! I have just one question: if I build a flutter app that uses GoogleMaps (just for showing markers at given locations, no other functionalities), how much will it cost to me the use use of the API when the userbase starts to grow? I googled it, but did not find anything conclusive! Thanks again!
Ciao Francesco! It depends on the volume of usage of your apps.
You can try to use this calculator to estimate: mapsplatform.google.com/pricing/
For showing markers i guess no api is used, just the geolocator is used. So that is free of cost. For using the paid api, the first 5000 requests will be free every month. And then it will charge you for each service in addition.
Is place api is paid?
@@sonit9707 is place api is paid?
can u make a tutorial on how to deal with listview builder when the data is of type "Future ". I dont know how to display this type of data using listview. Can u help plz.
did yu fix this? can you please help
@@nimmybastian3682 I got it fixed myself , but now I need to find in which project where I did it
is that api link (at 14.14 )is constant?
hey..Did you find the answer?? url is constant for all project??
is it possible you share the url you used for getPlaceId ?
You can get it on the official Google Maps docs: developers.google.com/maps/documentation/places/web-service/place-id
Wow, very nice one
i would like to learn more about google maps
Stay tuned for more content about Google Maps!
@@MaxonFlutter thank you so much, i get an error here "the provided api key is invalid", what should i do, thanks
Did you create your own api key in Google cloud?
@@MaxonFlutter yes. I did
That’s strange! You’ll have to double check if you have added the right api key every where and if you have enabled the correct api in Google Cloud
Hi great tutorials!!! how to show user current location to other location from firebase , can you help me?
Hi Tamirat, are you trying to retrieve coordinates from Firestore?
@@MaxonFlutter i want to connect current location with other location from firebase
@@MaxonFlutter yes,
Performing hot restart...
Syncing files to device sdk gphone x86...
Restarted application in 2,978ms.
W/Gralloc4( 8562): allocator 3.x is not supported
E/FrameEvents( 8562): updateAcquireFence: Did not find frame.
E/FrameEvents( 8562): updateAcquireFence: Did not find frame.
can you help please?
can anyone share that api link
Unhandled Exception: RangeError (index): Invalid value: Valid value range is empty: 0
getting the following error when trying to getPlaceId()
Same errore for me, did you fix it?
Just to help someone maybe, if you are getting the error "Exception has occurred. _TypeError (type 'Null' is not a subtype of type 'Map' in type cast)" in the Map of the result of the place, just put "await" on the placeId varible (final placeId = await getPlaceId(input);)
hello ,
I am getting a white blank screen instead of my map
What should I do ??
same
error: The linked framework 'Pods_Runner.framework' is missing one or more
architectures
required by this target: x86_64. (in target 'Runner' from project 'Runner')
Have you tried to run “flutter clean” and then “pod update”?
i did exactly what you did but i get an error in the location_service " var placeId = json['candidates'][0]['place_id'] as String;"
Exception has occurred.
RangeError (RangeError (index): Invalid value: Valid value range is empty: 0)
Could u pls help, thank in advance. :)
Hey George, that’s strange, can you try to print the whole response and see what you get.
@@MaxonFlutter thanks for answering, but not sure how to do that! 😅
@@MsGeorge99999 before saving the variable placeId, just add print(json[“candidates”])
@@MaxonFlutter same problem for me. I add now print(json[“candidates”]) and the result is: [ ]
I search also on web but I find nothing
can anyone share the github repo link
Does not display man on page what to do
Hi Nice tutorial. Please can you add and example of geofencing to detect user in and out of geofenced area?
I will try to make a video about that in the future.
hey I'm new to flutter, will this work on a web app?
Hi there, there are some tweaks to do to make it available on web as well. Please check the official docs as they explain these changes: pub.dev/packages/google_maps_flutter
is it possible on flutter web
can you please send the url ?( at 14:11)Thanks:)
Hi Faadil, the repository is public on my Github. You can copy the URL from there. To get the link, subscribe to my newsletter, link in the video description.
please can we have the source code
Can we show street view in flutter apps?
how to get github of this project?
Hi , the place API requires billing and I can't do that billing cz I don't have a credit card 😩 , so if there is any solution or suggestion I can do to show my customer how the app should work , I'm very need this , please help me
Hey Mohammed, unfortunately I think that there isn’t a workaround if you can’t enable billing 😣
@@MaxonFlutter thanks max for your response , i really appreciate that , keep up the good work ✊❤️
Hello, in my case it don't recognizes the "convert" and gives error, can you help me? @Max on Flutter heloooooo
this error I had and solved was really a noob kinda error and in case anyone else experiences the same; I will explain, on import convert, you gotta add import 'dart: convert' as convert; this guys.
Hi Emre, glad you found the solution and thanks for sharing it here
I am getting RangeError (RangeError (index): Invalid value: Valid value range is empty: 0) at this line var placeId = json['candidates'][0]['place_id'] as String; . I am unable to fix this error please help. Followed each and every line of your code still getting the error. Waiting for your reply eagerly !!!
It seems you didn't get a response from the Google Maps API.
I m also beginner. so i got this error too. then I remove application restriction and api restriction in my api key. it worked for me. idk may be this method help you.
@@toonkinga284 what you mean by removeing application resttiction
It means you remove credentials (place api ,directions api ,android sdk))
Like that?
@@toonkinga284 what are application restrictions ? Some thing in the code?
api key restrictions
it was showing blank screen when i run the main.dart why i did everything the same
Not sure, you might have missed some steps.
@@MaxonFlutter nope i did everything the same. Checked it again and again doesn't work. I'm using vscode and android avd
@@thexplode7 In androidManifest the metadata steps needs to be under application not under activity, its a common mistake that you possibly did
hi can we take the source code ?