GoogleMap animation with zoom

Anonymous

08:03

It's modified from the exercise "Animation on Google Maps Android API v2". Also enable various ui control, such as ZoomControls, Compass and All Gestures.

Re-allocate layout to include a seekbar to set the expected zoom level.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <Button
                android:id="@+id/clear"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:text="Clear" />
            <Button
                android:id="@+id/animate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Start" />
            <Button
                android:id="@+id/stopanimate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Stop" />
        </LinearLayout >
        <LinearLayout 
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Zoom" />
            <SeekBar
                android:id="@+id/zoombgar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:max="19"
                android:progress="0"
                android:text="Start" />
            <Button
                android:id="@+id/stopanimate"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Stop" />
        </LinearLayout >
        <TextView 
            android:id="@+id/info"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment"/>

</LinearLayout>

Modify the code to animate to the expected zoom level by calling animateCamera() method with CameraUpdateFactory.zoomTo(zoomValue), and animation duration also.

package com.example.androidmapsv2;

import java.util.ArrayList;
import java.util.List;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.CancelableCallback;
import com.google.android.gms.maps.GoogleMap.OnMapClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.Polyline;
import com.google.android.gms.maps.model.PolylineOptions;

import android.os.Bundle;
import android.app.Activity;
import android.app.FragmentManager;
import android.graphics.Color;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity 
 implements OnMapClickListener{

 private GoogleMap myMap;
 PolylineOptions polylineOptions;
 Polyline polyline;
 List<LatLng> listPoint;
 int currentPt;
 
 TextView info;
 SeekBar zoomBar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        FragmentManager myFragmentManager = getFragmentManager();
        MapFragment myMapFragment = 
          (MapFragment)myFragmentManager.findFragmentById(R.id.map);
        myMap = myMapFragment.getMap();
        
        myMap.setOnMapClickListener(this);
        
        listPoint = new ArrayList<LatLng>();
        clearPolyline();
        
        zoomBar = (SeekBar)findViewById(R.id.zoombgar);
        Button btnClear = (Button)findViewById(R.id.clear);
        Button btnAnimate = (Button)findViewById(R.id.animate);
        Button btnStop = (Button)findViewById(R.id.stopanimate);
        info = (TextView)findViewById(R.id.info);
        
        btnClear.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    clearPolyline();
   }});

        btnAnimate.setOnClickListener(btnAnimateOnClickListener);
        
        btnStop.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View arg0) {
    myMap.stopAnimation();
   }});
        
        myMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
        myMap.getUiSettings().setZoomControlsEnabled(true);
        myMap.getUiSettings().setCompassEnabled(true);
        myMap.getUiSettings().setAllGesturesEnabled(true);
    }
    
    OnClickListener btnAnimateOnClickListener =
      new OnClickListener(){

    @Override
    public void onClick(View v) {
     if(listPoint==null || listPoint.isEmpty()){
      Toast.makeText(getApplicationContext(), 
        "Not enought point!", 
        Toast.LENGTH_LONG).show();
     }else{

      float zoomValue = (float)(zoomBar.getProgress() + 2);
      
      myMap.animateCamera(
        CameraUpdateFactory.zoomTo(zoomValue), 
        5000,
        MyCancelableCallback);      
      
      currentPt = 0-1;
      
      info.setText("Zoom to: " + String.valueOf(zoomValue));

     }
    }
     
    };
    
    private void clearPolyline(){
     if(polyline != null){
      polyline.remove();
     }
     
     polylineOptions = new PolylineOptions();
     polylineOptions.color(Color.RED);
     
     listPoint.clear();
     
     myMap.clear();
    }


 @Override
 public void onMapClick(LatLng point) {
  myMap.addMarker(new MarkerOptions().position(point).title(point.toString()));

  polylineOptions.add(point);
  if(polyline != null){
   polyline.remove();
  }
  
  polyline = myMap.addPolyline(polylineOptions);
  listPoint.add(point);
 }
 
 CancelableCallback MyCancelableCallback =
   new CancelableCallback(){

    @Override
    public void onCancel() {
     info.setText("onCancel()");
    }

    @Override
    public void onFinish() {
     if(++currentPt < listPoint.size()){
      myMap.animateCamera(
        CameraUpdateFactory.newLatLng(listPoint.get(currentPt)), 
        5000,
        MyCancelableCallback);
      info.setText("Animate to: " + listPoint.get(currentPt));
     }else{
      info.setText("onFinish()");
     }
     
    }
  
 };

}