Animate a car(Marker) along a path in google map android

Question

I am going to share a solution of moving a marker along the path if you have List.The Bitmap will move along the path from using LatLng list.

Theurich

You post should be in a form of a question – Glottal

For animating polyline routes github.com/amalChandran/google-maps-route-animation – Doctrinal

Answer 1

public static void setAnimation(GoogleMap myMap, final List<LatLng> directionPoint, final Bitmap bitmap) {


    Marker marker = myMap.addMarker(new MarkerOptions()
            .icon(BitmapDescriptorFactory.fromBitmap(bitmap))
            .position(directionPoint.get(0))
            .flat(true));

    myMap.animateCamera(CameraUpdateFactory.newLatLngZoom(directionPoint.get(0), 10));

    animateMarker(myMap, marker, directionPoint, false);
}


private static void animateMarker(GoogleMap myMap, final Marker marker, final List<LatLng> directionPoint,
                                  final boolean hideMarker) {
    final Handler handler = new Handler();
    final long start = SystemClock.uptimeMillis();
    Projection proj = myMap.getProjection();
    final long duration = 30000;

    final Interpolator interpolator = new LinearInterpolator();

    handler.post(new Runnable() {
        int i = 0;

        @Override
        public void run() {
            long elapsed = SystemClock.uptimeMillis() - start;
            float t = interpolator.getInterpolation((float) elapsed
                    / duration);
            if (i < directionPoint.size())
                marker.setPosition(directionPoint.get(i));
            i++;


            if (t < 1.0) {
                // Post again 16ms later.
                handler.postDelayed(this, 16);
            } else {
                if (hideMarker) {
                    marker.setVisible(false);
                } else {
                    marker.setVisible(true);
                }
            }
        }
    });
}

Theurich

Would you explain to me what the List directionPoint contains? Thanks – Hearthstone

its List of LatLng from source to destination where car(marker) need to animate along the map – Theurich

I am working on animating car location based on a real time location updates from another app. So how can I get the LatLng List when I only have the current location? Is there a way I can delay the drawing of the app to collect few updates then add all to a List object and pass it to your method and continue to repeat that until the final destination? – Hearthstone

Hi Martain My requirement was to animate car on map from source to destination its not real time.in your case its real time so you don't need to use my function instead update marker based on current location and show and hide marker to create illusion of moving car – Theurich

+1, thank you . what is difference between your code and this gist : gist.github.com/broady/6314689#file-1markeranimation-java – Inconsecutive

I have used this code. But I am getting multiple markers. Older markers are not hiding when car has moved. Can you please tell me how to use this "hideMarker" value properly. – Telic

Answer 2

I'm also done with this same scenario, here given that code.

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback, LocationListener {

private static Location oldLocation;
private GoogleMap mMap;
private LocationManager locationManager;
private Marker marker;
private static float angle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_maps);
    SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
    locationManager = (LocationManager) getSystemService(LOCATION_SERVICE);
    if (ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(this, Manifest.permission.ACCESS_COARSE_LOCATION) != PackageManager.PERMISSION_GRANTED) {
        // TODO: Consider calling
        Toast.makeText(this, "Location permissioin in not enable", Toast.LENGTH_SHORT).show();
        return;
    }
    locationManager.requestLocationUpdates(LocationManager.GPS_PROVIDER, 2, 0, this);
    mapFragment.getMapAsync(this);
}

@Override
public void onMapReady(GoogleMap googleMap) {
    mMap = googleMap;
}

@Override
public void onLocationChanged(Location location) {
    locationUpdate(location);
    if (oldLocation != null) {
        double bearing = angleFromCoordinate(oldLocation.getLatitude(), oldLocation.getLongitude(), location.getLatitude(), location.getLongitude());
        changeMarkerPosition(bearing);
    }
    oldLocation = location;
}

private void locationUpdate(Location location) {
    LatLng latLng = new LatLng((location.getLatitude()), (location.getLongitude()));
    MarkerOptions markerOptions = new MarkerOptions();
    markerOptions.position(latLng);
    markerOptions.title("Current Position");
    markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.car_right));
    mMap.clear();
    marker = mMap.addMarker(markerOptions);
    CameraPosition position = CameraPosition.builder()
            .target(new LatLng(location.getLatitude(), location.getLongitude()))
            .zoom(19)
            .tilt(30)
            .build();
    mMap.animateCamera(CameraUpdateFactory.newCameraPosition(position));
}

private void changeMarkerPosition(double position) {
    float direction = (float) position;
    Log.e("LocationBearing", "" + direction);

    if (direction==360.0){
        //default
        marker.setRotation(angle);
    }else {
        marker.setRotation(direction);
        angle=direction;
    }
}

@Override
public void onStatusChanged(String provider, int status, Bundle extras) {

}

@Override
public void onProviderEnabled(String provider) {

}

@Override
public void onProviderDisabled(String provider) {

}


private double angleFromCoordinate(double lat1, double long1, double lat2,
                                   double long2) {
    double dLon = (long2 - long1);

    double y = Math.sin(dLon) * Math.cos(lat2);
    double x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1)
            * Math.cos(lat2) * Math.cos(dLon);

    double brng = Math.atan2(x, y);

    brng = Math.toDegrees(brng);
    brng = (brng + 360) % 360;
    brng = 360 - brng;
    return brng;
}}

hope this helpful.

Ventricular