Placepicker and Map Center - Maps on Flutterflow Part 2

[@jonnyhako]

Thanks for the workaround. Ideally we need the "placepicker" widget to get updated to handle this natively.

[@nomocodes]

Thanks for your kind words! And yes, hopefully one day it would be an out-of-box feature.

[@Omnibas]

Wow exactly what I needed! Was actually looking into custom widgets to save the Center location on the map, but this seems way easier!

[@nomocodes]

Glad I could help!!

[@idahsons]

Hello, Good tutorials. How to create geofferences?

[@sofia.the.samoyed]

I tried to do this in my flutterflow project. But there is no search results showing after I typed "london" in the place picker. The Google Map widget seems to be working fine in the project, I can interact with the zooming. Do you know what might have gone wrong? Thanks!

[@nomocodes]

Hi! Were you testing in preview mode or test mode? Have you tried testing it after you published it on the web?

[@oliveryoule11]

Hey Jasper, really like your work! Thank you for this video! I have followed your steps and it is working great, apart from my google map doesn't appear to be draggable in test mode. I have 'Allow Interacting with the Map' toggled on, as well as 'Allow Zooming on the Map'. I have another map in my app that drags and zooms fine, but this one does not. Is it because I have items stacked on top of it? But yours seems to drag fine. Have you come across this before?

[@oliveryoule11]

After more investigation, it looks like stacking a container/row on top of the googlemap interferes/intercepts the gesture the map receives. I don't understand though, because I have the same set up as you! i.e. Stack: Googlemap, Column: Container: Row: Placepicker, Button. Any help from anyone would be much appreciated! ❤

[@oliveryoule11]

Okay, last comment from me, and then I am giving up. It is definitely something to do with the widgets stacked on top of the map that cause the map to be undraggable. I took a look at the source code behind the stack (see below), and when you add a column (or any child accepting widget to the stack) it becomes wrapped in a PointerInterceptor - so the map becomes unresponsive. I learnt a lot about custom widgets when I went down this rabbit hole and learnt how to IgnorePointer instead of PointerInterceptor but still couldn't get to precisely what I wanted. No idea how you didn't come up against this problem, Jasper. Any help would be appreciated, for now I am going to omit this placepicker solution and try something else. // Generated code for this Stack Widget... Stack( children: [ Align( alignment: AlignmentDirectional(0, 0), child: FlutterFlowGoogleMap( // GoogleMaps WidgetCode ), ), PointerInterceptor( intercepting: isWeb, child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: [ Container(

[@nomocodes]

Hey! Thanks for the kind words! In terms of your questions, have you tried giving the container (the one on top of map) a fixed width that does not cover the entire map?

[@koen.mortier_fitchen]

Love it

[@AliMuthanna-b2e]

Thanks

[@EnriqueTabilo]

Hi... I'm trying to get the place id, the reviews, and other data, but I can't find a way to do it. I have done a live check and the placePicker requests all this data in the API (I can see it in the Json of the network in the element inspector of the browser) but in flutterflow the values ​​that it has by default are not all the ones that are in the json that has ¿Any way to create custom values ​​in the placepicker, to load the placeId, Reviews, Hours etc? Thank you very much for sharing your time and dedication. Greetings from Barcelona (Spain)

[@josephandres4324]

There should be an OnChange or OnSelect event, to use a second button is by no means practical for the end user.

[@nomocodes]

Yes I agree. For this tutorial, I wanted make everyone to understand very easily how the placepicker works.

[@EXPLOSIVEBUBBLEGUM]

Hi! I am trying to center the map on the device current location , but I can’t get it to work. I have the locations permissions enabled , I have the api keys inserted correctly, I have my browser location permission enabled , but somehow when I test the app , the map centers on the 0 °N , 0 °W.

[@EXPLOSIVEBUBBLEGUM]

Any ideas how to correct this in order for the map to center on the current device location ?

[@nomocodes]

Hi sorry for the late reply. Are you previewing it? Map does not work when you preview your project. Try publishing your project and view it live!

[@tremili]

@@EXPLOSIVEBUBBLEGUM Were you able to solve this?

[@naima_consulting]

Hi Thx for this vidéo could you please provide some exemple with Googlemaps pricing how its work many thx