How to animate google map v2 marker on the polyline path?

Question

I already build an app using google maps V2 and put 2 markers on the map. First marker is to get user current location, and the second marker is user destination location. And then I add decodePoly method to draw line between those markers. I also add method to give user information about durations,start address and destination address using alert dialog.

So, when I click the second marker, i want to animate that marker to "move" to first marker. But my problem is, the second marker is not moving on the polyline path. you can see at image below:

This is MapActivity.java:

@Override
public boolean onMarkerClick(Marker arg0) { // if user click the first marker 

    if(this.lokasi_asli.equals(arg0)){
        AlertDialog.Builder alert = new AlertDialog.Builder(MapActivity.this);
        alert.setTitle("First Position")
            .setIcon(R.drawable.ic_launcher)
            .setCancelable(true)
            .setMessage("First Position : " + "\n" + loc_a)
            .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {

                    dialog.dismiss();
                }
            })
            .setNegativeButton("No", new DialogInterface.OnClickListener() {
                @Override
                public void onClick(DialogInterface dialog, int which) {

                    dialog.dismiss();
                }
            });
        alert.show();
    } else if (this.lokasi_tujuan.equals(arg0)) { //if user click second marker
        final boolean hideMarker = false;
        final Handler handler = new Handler();
        final long start = SystemClock.uptimeMillis();
        Projection proj = gmap.getProjection();
        Point startPoint = proj.toScreenLocation(lokasi_tujuan.getPosition());
        final LatLng startLatLng = proj.fromScreenLocation(startPoint);
        final long duration = 5000;
        final Interpolator interpolator = new LinearInterpolator();
        handler.post(new Runnable() {

            @Override
            public void run() {
                long elapsed = SystemClock.uptimeMillis() - start;
                float t = interpolator.getInterpolation((float) elapsed / duration);
                double longid = t * lokasi_asli.getPosition().longitude + (1-t) * startLatLng.longitude;
                double latid = t * lokasi_asli.getPosition().latitude + (1-t) * startLatLng.latitude;
                lokasi_tujuan.setPosition(new LatLng(latid, longid));
                if(t < 1.0){
                    //
                    handler.postDelayed(this, 16);
                } else {
                    if(hideMarker){
                        lokasi_tujuan.setVisible(false);
                    } else {
                        lokasi_tujuan.setVisible(true);
                    }
                }
            }

        });

fetch data from google map:

@Override
    protected void onPostExecute(Void result){
        super.onPostExecute(result);
        if(doc != null){
            NodeList _nodelist = doc.getElementsByTagName("status");
            Node node1 = _nodelist.item(0);
            String _status1 = node1.getChildNodes().item(0).getNodeValue();
            if(_status1.equalsIgnoreCase("OK"))
            {
                NodeList _nodelist_path = doc.getElementsByTagName("overview_polyline");
                Node node_path = _nodelist_path.item(0);
                Element _status_path = (Element)node_path;
                NodeList _nodelist_destination_path = _status_path.getElementsByTagName("points");
                Node _nodelist_dest = _nodelist_destination_path.item(0);
                String _path = _nodelist_dest.getChildNodes().item(0).getNodeValue();
                List<LatLng> directionPoint = decodePoly(_path);

                PolylineOptions rectLine = new PolylineOptions().width(10).color(Color.RED).geodesic(true);
                for (int i = 0; i < directionPoint.size(); i++) 
                {
                    rectLine.add(directionPoint.get(i));
                }

                gmap.addPolyline(rectLine);
                mark_opt.position(new LatLng(dest_lat, dest_long));
                mark_opt.draggable(true);
                mark_opt.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE));
                lokasi_tujuan = gmap.addMarker(mark_opt);
            } else {
                Toast.makeText(MapActivity.this, "Maaf, Tidak dapat menemukan rute tujuan\nCoba pilih rute lain yang mendekati", Toast.LENGTH_LONG).show();
            }
            progres_dlg.dismiss();
            }
        }
    }

How can i make the second marker move on the polyline path?? Any ideas or help would be greatly appreciated. Environment : Windows 7, Eclipse, Genymotion.

Solution 1

Check out the tutorial which shows that how to animate marker on the map route. It also provides the code in GitHub also which you can try out.

Check HERE

Hope this will guide you.

Solution 2

See If you can use marker.setPosition(LatLng)

Position The LatLng value for the marker's position on the map. You can change this value at any time if you want to move the marker.

Comments

[Hendy]

@GrlsHu should i add actionbar sherlock first to my current project so i can extends to SherlockMapFragment?? basicly now i'm extends FragmentActivity to open the google map

[GrIsHu]

Yes, you need to add actionbar sherlock first and then extends SherlockMapFragment. Basically it will Fragment only indirectly.

[Hendy]

@GrlsHu sorry for asking this (and my english to), can i use FragmentActivity only and not using ABS? because without using ABS, i still can show the google map. and now my objective is to animate the second marker to move to first marker based on polyline path. i want to add few codes on github (link that you gave) to my project so i can achieve that animating marker.

[GrIsHu]

Well can not exactly say about the thing that you want to achieve. Because i need to also check that demo.