Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google maps flutter zoom in/zoom out

Tags:

flutter

I am trying to create a sample app like Uber with google_maps_flutter: ^0.5.10 .. In Uber app when you select a pickup/drop location, and you do double tap (to zoom in) or zoom in/zoom out scaling the screen it always happens respective to the center of screen. Whereas when I add the google maps in flutter and if I do double tap lets say on right bottom of screen, google maps zoom and takes the view to the area where it was tapped. Similarly it happens with the scaling (pinching screen). The area I scale the camera view goes to that particular location. But I want double tap or scaling to stay centered to my selected location (like in Uber).

I did achieve it using cameraMove and cameraStop callbacks. In that I determine if camera was moved due to a zoom, I get the last zoom factor and move camera back to my selected location with the new zoom factor. It works but does not looks good if I double tap on left corner the camera goes back to original position. Similarly I did for the scaling zoom as well to zoom in/zoom out the camera moves back to original location I selected.

Then I tried GestureDetector on top of the GoogleMaps. Inside that I handled the onDoubleTap. That looks neat as I just change the zoom factor on double tap and keep location same. But I am not able to achieve scaling zoom in/out using onScaleUpdate (etc) functions on GestureDetector.

Is there any better way in Google maps flutter plugin to do all this?

like image 445
user3652565 Avatar asked May 03 '19 11:05

user3652565


People also ask

How do you zoom in on Google Maps flutter?

Google map flutter is provided with a zoom property in a camera position you can use the zoom in google map view in the initial page. You select the API key then open the dialog box in the image below and copy the key and click the Restrict key.

How do you get the zoom level on Google Maps flutter?

GoogleMap( zoomGesturesEnabled: true, tiltGesturesEnabled: false, onCameraMove:(CameraPosition cameraPosition){ print(cameraPosition. zoom); }, onCameraMove take a void function and pass to it the CameraPosition argument, so you can use "cameraPosition. zoom" to return the current zoom level; "cameraPosition.

How do you remove zoom from Google Maps flutter?

If anyone want to remove zoom control. Add zoomControlsEnabled: false to google map view.


1 Answers

use onCameraMove this will listen to the change of the cameraPosition. for instance if you zoom in using double tap or zoom in/out using gestures,

GoogleMap(
  zoomGesturesEnabled: true,
  tiltGesturesEnabled: false,
  onCameraMove:(CameraPosition cameraPosition){
     print(cameraPosition.zoom);
  },

onCameraMove take a void function and pass to it the CameraPosition argument, so you can use "cameraPosition.zoom" to return the current zoom level; "cameraPosition.tilt" return the current tilt angle ...

like image 114
Dieu le veut Nkenye Avatar answered Nov 15 '22 10:11

Dieu le veut Nkenye