GMap Bearing rotation in smooth motion (avoid jerky effect when changing bearing values)

Question

I want to rotate GMap by changing the bearing angle value, so the camera rotates around the center point (360-Degree one full round ). When we change the bearing, there is a

Answer 1

Giving this as an answer as a comment would be rather hard to read; this is taken from the google documentation.

Consider this code:

CameraPosition cameraPosition = new CameraPosition.Builder()
    .target(MOUNTAIN_VIEW)      // Sets the center of the map to Mountain View
    .zoom(17)                   // Sets the zoom
    .bearing(90)                // Sets the orientation of the camera to east
    .tilt(30)                   // Sets the tilt of the camera to 30 degrees
    .build();                   // Creates a CameraPosition from the builder
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

This code creates a new camera position, and that's exactly what you're trying to mutate: the bearing of the camera. So if you create a new camera position like this:

CameraPosition cameraPosition = new CameraPosition.Builder()
    .bearing(50)
    .build();

and then animate the camera to that position:

map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));

That should do the trick. To give some more information on what you will need to use as bearing:

a bearing of 90 degrees results in a map where the upwards direction points due east.

Good luck.

Answer 2

After going through all possible cases, I came to know that GMap is not built with required feature of Rotating map in 360-Degree in one go with custom animation. Don't know if this appears in next GMap api version.

For now, the possible solution is to change the animation logic, and instead of rotating 360-Degree we can rotate to e.g. 180-Degree with reduced animation speed (animation duration time).

This allows us to bring required map surrounding search experience to the user.

(For now I am posting this temporary answer, and allow others to update or post latest answer in future).

---

I have submitted this animation control issue on GMap issue tracker, please START this issue in order to show your interest and feedback, so Google team can take this feature into their final consideration. https://issuetracker.google.com/u/1/issues/71738889

Answer 3

I'm going to write this as another answer as I'd like to take the time to write a wall of text, whereas I'd like to keep the other answer as short as possible since it might still help other people with a similar problem.

The problem

So if I understand correctly, what you're trying to do is build an application with Google maps for different platforms. You're running into an issue with Google maps (the jerky movement) and you're trying to find a fix for all the platforms.

My proposed solutions

I'll divide this into a few sections, because I see different ways to go forward.

• Find a solution for all the platforms.

This one seems like the most straightforward, but it could be akin to the XY problem. I've tried to introduce you to some ways of animating views, and you've solved the problem in your iOS app, but at the core what you're dealing with is a flaw in the Google maps animation when changing the bearing. I am not sure if there is a way to tackle this problem on every platform, as I haven't tried.

• Use a different map

This sounds like a big step, and depending on your usage something you don't want to do. However, I've successfully used Leaflet (a JS map) with a WKWebView on iOS and Android and that all worked pretty well (this obviously also works fine in the browser). Keep in mind that some other maps might also have the jerky animation.

Wrapping it up

I hope I've given some insight. I'll add to this answer as we find out new things about the problem. Could you try to provide a minimal reproducible example? That way I can give it a better try. Good luck!