How to implement marker clustering using Google Maps API in a fragment

18-06-2016

Google Maps, Google Utils Library, JSON, android

Google has provided an excellent documentation on marker clustering (Developers site) , but it still requires hours of hacking before an amateur like me implements it. For those who don’t know its use, clustering is used to represent large number of markers in an effective way.

This code gist is again part of my college app(DtuGuide). The Google Maps Android API utility library supports Android API level 9 and above. The animated re-clustering features are only available for Android API level 14 and above. When setting your project build target, make sure you use the latest Android API level. The following code implements clickable markers showing information regarding each marker and also the respective directions to reach a particular marker from the current location by implicitly calling Google Maps Application. I have implemented the concept in a fragment rather than an activity. The markers shown in the map above have been locally saved in the project itself in the form of a JSON file.
The following steps implement it-

Step 1

Add the following dependencies to your app’s Gradle build file. Do update the libraries if a newer version is available.

build.gradle

dependencies {
    compile 'com.google.maps.android:android-maps-utils:0.4+'
    compile 'com.google.android.gms:play-services-location:8.1.0'
    compile 'com.google.android.gms:play-services-maps:8.1.0'
}

Step 2

Locally save the JSON file in your Assets folder which contains the information about the markers . In my case, apart from the compulsory latitude and longitude, I have stored title, subtitle, floor and type. I have displayed title and subtitle in my information dialog on clicking the marker. Each object of the array represents information about the marker. Below is my attached JSON file.

map.json

{
"map":
[

 {
"title": "OAT",
"subtitle": "",
"floor": "Ground",
"type": "",
"latitude": "28.75007207311156",
"longitude": "77.11772996932268"
},

{
"title": "SBGF1",
"subtitle": "Chemistry Lab",
"floor": "Ground",
"type": "Lab",
"latitude": "28.75136748222652",
"longitude": "77.1180622279644"
},

{
"title": "SBGF2",
"subtitle": "Processing Lab",
"floor": "Ground",
"type": "",
"latitude": "28.75128988158836",
"longitude": "77.11803004145622"
},

{
"title": "SBGF3",
"subtitle": "Polymer Testing Lab",
"floor": "Ground",
"type": "",
"latitude": "28.751279299678668",
"longitude": "77.1179549396038"
}
]
}

Step 3

Create a layout xml file for your fragment.

mymap.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <AutoCompleteTextView
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:padding="10dp"
        android:hint="Search"
        android:elevation="1dp"
        android:layout_marginTop="5dp"


        android:id="@+id/autoCompleteTextView"
        android:layout_marginLeft="85dp"
        android:layout_marginRight="85dp"

        android:layout_above="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal|top" />
</FrameLayout>

Step 4

Create a Java class for implementing custom cluster item.

MyItem.java

import android.content.Context;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.maps.android.clustering.ClusterItem;
import com.google.maps.android.clustering.ClusterManager;
import com.google.maps.android.clustering.view.DefaultClusterRenderer;

public class MyItem implements ClusterItem {
    private final LatLng mPosition;
    private  String title;
    private String subtitle;
    private String floor;

    public MyItem(double lat, double lng,String stitle,String ssubtitle,String sfloor ) {

        mPosition = new LatLng(lat, lng);
        title=stitle;
        subtitle=ssubtitle;
        floor=sfloor;



    }

    public String getTitle() {
        return title;
    }



    public String getsubtitle() {
        return subtitle;
    }

    public String getfloor() {
        return floor;
    }




    @Override
    public LatLng getPosition() {
        return mPosition;
    }
}

class MyClusterRenderer extends DefaultClusterRenderer<MyItem> {

    public MyClusterRenderer(Context context, GoogleMap map,
                             ClusterManager<MyItem> clusterManager) {
        super(context, map, clusterManager);
    }

    @Override
    protected void onBeforeClusterItemRendered(MyItem item, MarkerOptions markerOptions) {
        super.onBeforeClusterItemRendered(item, markerOptions);

        markerOptions.title(item.getTitle());
        markerOptions.snippet(item.getsubtitle());

    }

    @Override
    protected void onClusterItemRendered(final MyItem clusterItem, Marker marker) {
        super.onClusterItemRendered(clusterItem, marker);
    }

}

Step 5

Create the corresponding Java classes for the layout file created.

getmarkerfromstring.java

public class getmarkerfromstring {
    private double lat;
    private double lng;
    private String name;

    public double getLat() {
        return lat;
    }
    public double getLng() {
        return lng;
    }

    public void setLat(double lat) {
        this.lat = lat;
    }
    public void setLng(double lng) {
        this.lng = lng;
    }
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

MyMap.java

import android.location.Location;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.Toast;
import com.google.android.gms.common.api.GoogleApiClient;
import com.google.android.gms.location.LocationServices;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.maps.android.clustering.Cluster;
import com.google.maps.android.clustering.ClusterManager;


import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

public class MyMap extends Fragment {

    InputStream inputstream;
    BufferedReader reader;
    String title;
    private Location mCurrentLocation;
    AutoCompleteTextView actv;
    List<MyItem> items = new ArrayList<MyItem>();
    String subtitle;
    String floor;
    String type;
    Double lat;
    Double lng;
    ArrayList<getmarkerfromstring> users=new ArrayList<getmarkerfromstring>();
    String[] countries=new String[576];
    int len;
    int arraylength;
    ClusterManager<MyItem> mClusterManager;
    JSONArray jsonArray;
    JSONObject jsonObject;
    String m;
    private GoogleMap mMap;
    private GoogleApiClient
            mGoogleApiClient;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        mGoogleApiClient = new GoogleApiClient.Builder(getActivity())
                .addApi(LocationServices.API)
                .build();
                View v=inflater.inflate(R.layout.mymap, container, false);
        actv=(AutoCompleteTextView)v.findViewById(R.id.autoCompleteTextView);

        return v;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        setUpMapIfNeeded();

    }

    @Override
    public void onResume() {
        super.onResume();
        setUpMapIfNeeded();
    }

    private void setUpMapIfNeeded() {
        if (mMap == null) {
            mMap = ((SupportMapFragment) getChildFragmentManager().findFragmentById(R.id.map)).getMap();
//             Check if we were successful in obtaining the map.
            if (mMap != null) {
                setUpMap();
            }
        }
    }


    private void initCamera() {
        CameraPosition position = CameraPosition.builder()
                .target(new LatLng(YOUR_INITIALIZING_LATITUDE, YOUR_INITIALIZING_LONGITUDE))
                .zoom(18f)
                .bearing(0.0f)
                .tilt(40f)
                .build();

//      Tilt is useful to give a 3D view of the map.

        mMap.animateCamera(CameraUpdateFactory.newCameraPosition(position), null);

//      Set Map type normal for easy loading of map.

        mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        mMap.setTrafficEnabled(true);
        mMap.setMyLocationEnabled(true);
        mMap.getUiSettings().setZoomControlsEnabled(true);

}

    private void setUpMap() {
        mCurrentLocation =
                LocationServices.FusedLocationApi.getLastLocation(mGoogleApiClient);
        initCamera();
        mClusterManager = new ClusterManager<MyItem>(getActivity(), mMap);
        mMap.setOnCameraChangeListener(mClusterManager);
        mMap.setOnMarkerClickListener(mClusterManager);

        mClusterManager
                .setOnClusterClickListener(new ClusterManager.OnClusterClickListener<MyItem>() {
                    @Override
                    public boolean onClusterClick(final Cluster<MyItem> cluster) {
                        mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(
                                        cluster.getPosition(), (float) Math.floor(mMap
                                                .getCameraPosition().zoom + 2)), 300,
                                null);

                        return true;
                    }
                });

//      I have used a local JSON file to fetch the marker information. You could also parse the
//      JSON file from the internet. I would suggest saving it locally, but if you really want to fetch it
//      from the internet, use Retrofit Http client developed by Square.

        try {
            inputstream = getResources().getAssets().open("map.json");
            reader = new BufferedReader(new InputStreamReader(inputstream));
            m = reader.toString();
            StringBuilder total = new StringBuilder();
            String line;
            while ((line = reader.readLine()) != null) {
                total.append(line);
            }
            m = total.toString();
        } catch (IOException ex) {
            Toast.makeText(getActivity(), "fail", Toast.LENGTH_SHORT).show();
        }

        try {

//          JSON is parsed here.

            jsonObject = new JSONObject(m);
            jsonArray = jsonObject.optJSONArray("map");
            arraylength = jsonArray.length();
            len = arraylength;
            for (int i = 0; i < arraylength; i++) {

                JSONObject jsonChildNode = jsonArray.getJSONObject(i);
                title = jsonChildNode.optString("title");
                subtitle = jsonChildNode.optString("subtitle");
                floor = jsonChildNode.optString("floor");
                type = jsonChildNode.optString("type");
                lat = jsonChildNode.optDouble("latitude");
                lng = jsonChildNode.optDouble("longitude");
                double lat1=lat;
                double lng1=lng;
                items.add(new MyItem(lat1,lng1,title,subtitle,floor));

//              I have implemented an autocompletetextview searching for the location on the map.
//              The search parameters include title and subtitle both.

                countries[2*i]=title;
                countries[2*i+1]=subtitle;
                getmarkerfromstring user = new getmarkerfromstring();
                user.setLat(lat1);
                user.setLng(lng1);
                user.setName(countries[i]);
                users.add(user);
                getmarkerfromstring user2 = new getmarkerfromstring();
                user2.setLat(lat1);
                user2.setLng(lng1);
                user2.setName(countries[2*i+1]);
                users.add(user2);

            }

            mClusterManager.addItems(items);
            mClusterManager.setRenderer(new MyClusterRenderer(getActivity(), mMap, mClusterManager));
            mClusterManager.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
                @Override
                public boolean onClusterItemClick(MyItem myItem) {
                    Toast.makeText(getActivity(), myItem.getfloor() + " floor",Toast.LENGTH_SHORT).show();
                    return false;
                }
            });


        } catch (JSONException e) {
            e.printStackTrace();
        }

//      The adapter to populate the autocompletetextview.

        ArrayAdapter<String> adapter= new ArrayAdapter<String>(getActivity(),
                android.R.layout.simple_spinner_dropdown_item,countries);
        actv.setAdapter(adapter);

        actv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick (AdapterView<?> parent, View view, int position, long id) {
                //... your stuff
                String s=parent.getItemAtPosition(position).toString();
                int pos= Arrays.asList(countries).indexOf(s);
                 LatLng lng=new LatLng(users.get(pos).getLat(),users.get(pos).getLng());
                        mMap.animateCamera(CameraUpdateFactory.newLatLngZoom(lng,(float)Math.floor(mMap.getCameraPosition().zoom+8)));


                    }
        });
    }
}