Car Animation in Google Map 🌍

Animate car marker in Google map using Flutter

There are times when we have to animate the map marker from one location to another location. Google map SDK for Flutter does not provide any inbuilt functionality to do the same.

Car animation example

Requirement 🛠

We need to create Google key before to use it in our app. You can follow the steps below to generate the key and set up the Google map plugin. Also follow the individual platform setup for android and iOS 👇

🔗 https://pub.dev/packages/google_maps_flutter

We will also use StreamBuilder to update the UI of the map. You can learn more about that below 👇

🔗 https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html

Checkout the below article for Google map setup and styling 👇

Flutter And Google Map For Beginners : Part 1 🧐

Add Google Map 🗺

Now we will add add the Google map widget to our screen. First, let’s create a basic home screen in our Flutter app.

Now we will add the Google map widget to our home screen. We will wrap the widget in StreamBuilder to update its UI.

Google Map home screen

Above we have created a Google map widget with some of its properties like initialCameraPosition which will set the initial position of the camera on the map. We have also set some UI flags like mapToolbarEnabled, myLocationEnabled, zoomControlsEnabled, etc. to change default map behavior. You can change this flags according to your requirement.

Note: The map widget is wrapped around StreamBuilder of Marker. This Marker object which will contain marker data like location, image etc. We will update this stream to update the UI of the map.

After you run the app, it will show google map in the home screen with the map at the initial position defined in the widget.

Create Marker 📍

Now we will add a custom marker to the map. We will define the latitude, longitude and image of the marker.

Marker added to Google map

First, we will initiate the marker with current location

Note: We are using custom icon for marker. You can define your own image if you want using asset folder of the project.

Now we will update the UI of the map using StreamBuilder to show the marker on the map. We will update the UI ininitState() of the home screen.

Animate Marker 🚗

We have already added one marker to the map, we will move the marker from one position to another.

We will use Flutter Tween animation class. You can learn more about Tween below 👇

🔗 https://api.flutter.dev/flutter/animation/Tween-class.html

We will update the value of Tween from 0 to 1, during the animation we will update the location of the marker. We will calculate the new location of the marker on every animation callback.

⚙️ Let’s create animation Utility method for car animation.

First, we will calculate the Bearing of the icon. This will animate the icon in correct orientation according to our drop point. Then we will add our initial marker to the map.

Note: We are calculating the Bearing to rotate the icon in the correct direction. If we don’t put rotation on the marker, then the icon will move perpendicular to the screen.

⚙️ We will now create animation controller for our Tween animation.

Finally, we can animate the marker according to our animation values. The animation value will change from 0 to 1. During this, we will update the new location of the marker.

On every animation callback, we update marker location, then move the Google camera to the new marker location. This keep the animation in frame of Google map.

Let use the above create method to update our marker and see the magic 🪄

Full Code 🏁

Check full code implemented in our previous home screen

We have now successfully implemented the car animation in Google map. You can use the above method to easily animate the maker. Just pass the start and end point to the method, and it will take care of the rest.

Thank you, and I hope this article helped you in some way. If you like the post, please support the article by sharing it. Have a nice day!👋

I am an mobile enthusiast 📱. My expertise is in Flutter and Android development, with more than 5 years of experience in the industry.

I would love to write technical blogs for you. Writing blogs and helping people is what I crave for 😊 .You can contact me at my email(abdulrehman0796@gmail.com) for any collaboration 👋

🔗 LinkedIn: https://www.linkedin.com/in/abdul-rehman-khilji/

arKapp is helping fellow Android Developers

Stunning Ticket Widget For Flutter 🍿

🎩 Sophisticated Shared Preferences