Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to animate marker when it is added to map on Android?

Tags:

android

I want to animate map markers when they are added to map.

User should see the map with markers around him. Each new marker should bounce.

like image 972
Alexey Zakharov Avatar asked Nov 19 '11 03:11

Alexey Zakharov


People also ask

How to add animation to a marker?

You need to use the Interpolator class to apply the animation on the Marker and handle it in the Handler for the animation as below:

What is a marker on Google Maps?

Markers identify locations on the map. The default marker uses a standard icon, common to the Google Maps look and feel. It's possible to change the icon's color, image or anchor point via the API. Markers are objects of type Marker, and are added to the map with the GoogleMap.addMarker (markerOptions) method.

How to add custom marker to Google Maps using API key?

After adding the API key, you can run your app and you will get to see a default marker on the Sydney location with the default marker. For adding a custom marker to Google Maps navigate to the app > res > drawable > Right-Click on it > New > Vector Assets and select the icon which we have to show on your Map.

How to animate the marker from previous location to user new location?

In here first, we check if the currentLocationMarker equal to null. Then we simply add a new marker on the map. If not then we call our AnimatingMarkerHelper class to animate the marker from the previous location to user new location. Below is the code of AnimatingMarkerHelper. java class.


1 Answers

You can implement the onMarkerClick() and make the marker bounce whenever user clicks on it. Just try out below code implementation. I have tried it and it works totally fine.

 private Marker mPerth;  
 private Marker mPerth = mMap.addMarker(new MarkerOptions()
             .position(PERTH)
            .title("Perth")
            .snippet("Population: 1,738,800"));        
  @Override   
public boolean onMarkerClick(final Marker marker) 
  {
      // This causes the marker at Perth to bounce into position when it is clicked.
    if (marker.equals(mPerth)) {
        final Handler handler = new Handler();
        final long start = SystemClock.uptimeMillis();
        Projection proj = mMap.getProjection();
        Point startPoint = proj.toScreenLocation(PERTH);
        startPoint.offset(0, -100);
        final LatLng startLatLng = proj.fromScreenLocation(startPoint);
        final long duration = 1500;
        final Interpolator interpolator = new BounceInterpolator();
        handler.post(new Runnable() {
            @Override
            public void run() {
                long elapsed = SystemClock.uptimeMillis() - start;
                float t = interpolator.getInterpolation((float) elapsed / duration);
                double lng = t * PERTH.longitude + (1 - t) * startLatLng.longitude;
                double lat = t * PERTH.latitude + (1 - t) * startLatLng.latitude;
                marker.setPosition(new LatLng(lat, lng));
                if (t < 1.0) {
                    // Post again 16ms later.
                    handler.postDelayed(this, 16);
                }
            }
        });
    }
    // We return false to indicate that we have not consumed the event and that we wish
    // for the default behavior to occur (which is for the camera to move such that the
    // marker is centered and for the marker's info window to open, if it has one).
    return false;
}

You can also use this at the time of adding the marker in your application besides onClick event. I hope this what you want only.

like image 72
GrIsHu Avatar answered Sep 28 '22 06:09

GrIsHu