Flutter Flow : Custom Markers on Google Maps using Supabase

[@coffeebytez]

Make sure to follow this article when using the library: coffeebytez.com/articles/flutter-flow-map-template-update-library-migration . If you get an error when trying to switch to "current", you may have custom map widget code that you have copied from one of my articles. These have the same name as the custom widgets in the library. You can rename your custom widgets or delete them altogether to resolve the error.

[@liamino]

Hey Chris - cheers for this tutorial. I'm stuck on setting variable on SupabaseMap widget. There's no option for "No Further Changes" on Available Options. What am i missing ?

[@coffeebytez]

Hi, I believe it depends on your actions. You can send a message to the email in the description for additional help

[@admingoogleapps1161]

I do have the same problem. Can you share the solution here? Thanks a lot for your effort. Oh, wait if I use the same table name "place" or make a view with the that name in Supabase the it seems to work

[@coffeebytez]

I have updated code in the link in the description.I also have a newer article that includes optimized code: medium.com/@coffeebytez/flutter-flow-map-custom-markers-using-custom-data-types-and-action-blocks-006c022d49db

[@IshfaqunNisa]

Hey Chris, thank you very much for the video! I have one question, is there any way to add labels to the markers so that those show on the map and doesnt require tapping on them first?

[@coffeebytez]

Yes, using a custom widget instead of an image

[@ivanberestevich6195]

Hello! Thank you very much for your guide!! But i got one error:( When FlutterFlow check custom Widgets, I got error: "The name 'PlaceRow' isn't a type, so it can't be used as a type argument. Try correcting the name to an existing type, or defining a type named 'PlaceRow'." And second error: "The property 'imageUrl' can't be unconditionally accessed because the receiver can be 'null'. Try making the access conditional (using '?.') or adding a null check to the target ('!')." Can you help me, please?

[@coffeebytez]

Hi, you're welcome, glad it was helpful! The first error may be from not having Supabase set up in Flutter Flow. For the second one you can make the parameter non nullable.

[@NGStudios-w6y]

Hello, is it possible to draw a line (red or any color) that shows the person's current point to the future point where they want to go?

[@coffeebytez]

Yes using Google Map Polylines

[@manuelquintana7129]

It works perfectly for me when I publish to Web but when I compile the apk from flutterflow.. I only get a blank page and the map does not load... can you help me? 😢

[@coffeebytez]

Hi, yes send a message to the email in my description. Could be a missing API key or missing permissions

[@manuelquintana7129]

@@coffeebytez i will !! Thanks you 🤝

[@JoshuaEdmond]

Awesome library, but I'm getting a permissions error when trying to add it to my project. Any suggestions?

[@coffeebytez]

Which map are you attempting to use? Also if it’s referring to map setup, follow flutter flows google map setup, create a blank page and drag flutterflow google map on it. They won’t add the API keys for you unless you do that

[@JoshuaEdmond]

@@coffeebytez After you mentioned it, I added the google map widget to an empty page, but I had already manually setup my APIs. I'm still getting the error, so IDK.

[@coffeebytez]

@JoshuaEdmond Make sure to choose version "current". If you want you can screenshot the errors and send me an email

[@Cesarkzz]

Hi, how to only convert the lat long from supabase to flutterflow gmaps or mapbox?

[@coffeebytez]

Hi, check here: www.patreon.com/posts/converting-and-106458445?Link&

[@Viju489]

Hi, thank you for the tutorial. It has been most insightful. How did you get around the android and iOS api key requirements for the google maps placed on the bank page along with the images we’d be using for the custom widget?

[@coffeebytez]

Hi, I added the iOS and Android API keys. It doesn't get added automatically without adding the flutterflow maps on a blank page. Also put the images I'm using on the same blank page so they get added as well. I think there is an option for images now though in settings. Does that answer your questions?

[@Viju489]

⁠@@coffeebytezthink I’m a little lost, I added the google maps widget to a blank page but the api keys did not follow.. Where do you get the api keys from?

[@coffeebytez]

I see, Flutter Flow has a tutorial on adding them: docs.flutterflow.io/settings-and-integrations/integrations/google-maps

[@Viju489]

@@coffeebytez thank you

[@coffeebytez]

@@Viju489 you're welcome

[@alejandromontoyasanchezdel5392]

hello! thanks for the video it was really usefull, however, I am receiving a null image from the path that is pointing to an image in a supabase bucket, do you know what may be the reason? I tried use a public bucket and I added the policy Give anon users access to JPG images, additionally I tried with png and jpeg but nothing worked. Once again, thank you very much!

[@coffeebytez]

The only thing I can think of is the column not being named the same as what's in the video and article

[@alejandromontoyasanchezdel5392]

@@coffeebytez I realised that when I downloaded the code, the API KEY wasn't added into the AndroidManifest.xml so I didn't work in my phone, neither when I tried to test it in the web application, so once again thank you very much for the video great content!

[@coffeebytez]

Yes make sure to add a blank page with FlutterFlows map, so it adds the keys for you

[@yuryartamonov765]

Hello Chris. Thank you for your video and code. Maybe I misunderstood something. I need special marker image for each location. But in someway when I'm in test mode I see default ones. I made blank page with map and image but still in test mode I have it.

[@coffeebytez]

I remember in Test mode the custom markers didn't show, but when you ran the app locally or deployed, it worked. I thought they fixed that though. I'll try it out when I get a chance.

[@yuryartamonov765]

@@coffeebytez Thank you

[@onedayapp3534]

Hii ! Im struggling with query cache with supabase queries, I dont know how to cache the queries that generates the childre so it doesnt make the query everytime the page loads

[@coffeebytez]

You would need to do an app level cache

[@adonis2846]

Hey Chris, thank you for the videos. Would you be up for doing a little development? There is a feature that I want in my app that is very similar to what you have done here.

[@coffeebytez]

Hi, no problem. Sure my email is linked in the description.

[@atheer3343]

Hello, thank you for the video hard to find Supabase used with flutterflow videos. Would it be possible to filter a list based on the closest to the current location of a user? Thank you in advance

[@coffeebytez]

Hi, you're welcome! Yes, that would be possible with PostGIS. Supabase has a video on this: kzbin.info/www/bejne/l5ippHp6f92draM . You could also use Google's Nearby Search from their Places API: developers.google.com/maps/documentation/places/web-service/nearby-search

[@coffeebytez]

There is actually another way to do this using the Distance Matrix API from google

[@Manu-li1rw]

hi there can you create a video on how to add Google Map Polylines in Flutterflow? thanks!

[@coffeebytez]

Sure

[@Hannesdollner]

Create video! Thanks a lot. Can you please let us all know how to apply a map style created by Google Maps Plattform Style Wizzard. How can I pass the map style id to supabasemap.

[@coffeebytez]

I haven't used that before. I'll look into it

[@HannesLichert]

​​@@coffeebytez did you have any Chance to Look into it? Would really appreciate

[@coffeebytez]

Check this out: dev.to/ayevbeosa/styling-google-maps-in-your-flutter-app-4gel

[@allanchaves9658]

Hi Chris! Congratulations on the video. it helped a lot. Please, would it be possible to use SUPABASE to perform live tracking? I looked for different content, but I found it only for Firebase but not for Supabase. Please can you help me?

[@coffeebytez]

Yes, you can! Supabase allows you to listen to real-time data changes on the client side: supabase.com/docs/guides/realtime?language=dart

[@allanchaves9658]

@@coffeebytez Thank you so much.