Need Help with Google Maps and Place Picker Integration in FlutterFlow

Actions & Logic

Hi everyone,

I'm a React Native developer who has recently started working with FlutterFlow. I'm in the process of creating a location-based app and have run into a bit of a roadblock with integrating Google Maps and a Place Picker.

Here's the user flow I'm trying to achieve:

  1. When the user opens the map page, it should display their current location with a marker and the corresponding address.

  2. When the user selects a new location using the Place Picker, the map should update to center on this new location with a marker, and the address should be displayed.

I've managed to set up the map and the Place Picker, but I'm struggling with the following:

  • The map initially centers on the user's current location, but the marker and address do not show until the user selects a place with the Place Picker.

  • After selecting a new location, I'm not sure how to update the marker and address text to reflect the new choice.

If anyone has experience with FlutterFlow and could provide some guidance or code snippets, it would be greatly appreciated. I'm looking for detailed steps or best practices on managing state in FlutterFlow and ensuring the UI updates properly when integrating with Google Maps and Place Picker.

Thank you so much for your time and help!

What have you tried so far?

I have set up the initial states for the address (initialAddress) and coordinates (initialCoordinates) as strings and LatLng, respectively. However, I'm not clear on how to proceed with updating and displaying these when the map is first loaded and after a new place is picked.

Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply