Integrating Google Map Marker to Show Lots of Data Using Android view

0
Shares
Integrating Google Map Marker to Show Lots of Data Using Android view
3 (60%) 2 votes

google map maker Android tutorial

The standard features of Google maps are very useful. Location data plays a huge role to make app user experience significantly. And there will come a time when you’ll have to dig in a little bit more to offer a great app user experience. Fortunately for us, Google has created a set of utilities including Google Map Marker that developers can use to provide more enhanced Maps in Android apps.

In this Google tutorial, we’ll cover how to use an Android view to show sample data with Google Maps Marker clustering to display the highly functional map in an Android application.

Let’s Get Started

First, we need to integrate Google Maps into the demo. For this, you can refer to our article on Integrating and obtaining Google maps in Android app.

Next, add a dependency in .gradle file.

Also, add Google map util library.

Now import from maven

compile 'com.google.maps.android:android-maps-utils:0.3+'

Add Custom Class for managing data marker

public class MyItem implements ClusterItem {
private final LatLng mPosition;
private final String name;
private final PlaceType placeType;
public MyItem(double lat, double lng, String name, PlaceType placeType) {
mPosition = new LatLng(lat, lng);
this.name = name;
this.placeType = placeType;
}
@Override
public LatLng getPosition() {
return mPosition;
}
public String getName() {
return name;
}
public PlaceType getPlaceType() {
return placeType;
}
}

Add Clustering in Activity

Once map loaded, initialize clustermanager

a)

//declare ClusterManager
private ClusterManager<MyItem> mClusterManager;
private MyItem clusterItem;
mClusterManager = new ClusterManager<MyItem>(this, mMap);

b) initialize listeners

mMap.setOnCameraIdleListener(mClusterManager);
mMap.setOnMarkerClickListener(mClusterManager);
mClusterManager
.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
@Override
public boolean onClusterItemClick(MyItem item) {
clusterItem = item;
return false;
}
});

Add Marker info adapter in Activity

  • Design Layout File
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="1dp"
android:background="@android:color/white">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
android:orientation="horizontal"
android:padding="15dp"
>
<ImageView
android:id="@+id/ivPlace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"/>
<TextView
android:id="@+id/txtTitle"
android:layout_width="0dp"
android:layout_weight="1.0"
android:layout_marginLeft="10dp"
android:textSize="18sp"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
  • Custom Adapter
public class MarkerAdapter implements GoogleMap.InfoWindowAdapter {
private final View myContentsView;
MarkerAdapter() {
myContentsView = getLayoutInflater().inflate(
R.layout.item_info_window, null);
}
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
TextView tvTitle = ((TextView) myContentsView
.findViewById(R.id.txtTitle));
ImageView ivPlace = ((ImageView) myContentsView
.findViewById(R.id.ivPlace));
tvTitle.setText(clusterItem.getName());
ivPlace.setImageResource(clusterItem.getPlaceType() == PlaceType.RESTAURANT ? R.drawable.ic_food : R.drawable.ic_cafe);
return myContentsView;
}
}
  • Add it to Cluster Manager
mClusterManager.getMarkerCollection().setOnInfoWindowAdapter(
new MarkerAdapter());

Start Code Integration

  • PlaceType.java
public enum PlaceType
{
CAFE, RESTAURANT
}
  • MyItem.java
public class MyItem implements ClusterItem {
private final LatLng mPosition;
private final String name;
private final PlaceType placeType;
public MyItem(double lat, double lng, String name, PlaceType placeType) {
mPosition = new LatLng(lat, lng);
this.name = name;
this.placeType = placeType;
}
@Override
public LatLng getPosition() {
return mPosition;
}
public String getName() {
return name;
}
public PlaceType getPlaceType() {
return placeType;
}
}

Constant.java

public class Constants {
public static String[] name = {
//location of Ahmedabad Cafe
"Seva Cafe",
"The Chocolate Room India Private Limited",
"Café Coffee Day",
"Cafe Coffee Day - Navrangpura",
"Midday Munchies",
"CAFE COFFEE CLUB",
"The Unforgettable",
"Fun snacks & juice Hub",
"Dunkin Donuts",
"Cafe Coffee Day - Panchavati",
"Mississipi Cafe",
"The Mad House Cafe",
"VarieTea at Gulbai Tekra",
"WeHive Cafe",
"Cafe Coffee Day",
"Wizards Food Court",
"Cheers Icecream Parlour",
"Choco",
"Cafe Coffee Day - University Road",
"h2o cafe",
//location of Ahmedabad hotel
"Four Points by Sheraton Ahmedabad",
"Lemon Tree Hotel, Ahmedabad",
"Hotel Good Night",
"Subway",
"Subway",
"Neelkanth Patang Restaurant",
"Mcdonalds",
"Agashiye",
"Gopi Dining Hall",
"Saffron",
"Khana Khazana",
"Jungle Bhookh",
"PARAMOUNT RESTAURANT",
"Volga Agency",
"Water Fall Restaurant",
"Epicurean Alley",
"Tasty Restaurant",
"Dadi Dining Hall",
"The Green House",
"Zenith Restaurant",
//location of baroda
"Rangoli Restaurant",
"Cafe Coffee Day",
"Kalyan Hotel",
"Cafe Coffee Day",
"The Chocolate Room",
"Cafe Coffee Day",
"Cafe Coffee Day",
"Brewberrys",
"Nescafé Stall",
"Cafe Coffee Day - Fatehgunj Main Road",
"Cafe Coffee Day - Coffee N U",
"The Goodies Cafeteria",
"Cafe Coffee Day - Moje Sayajigunj",
"Tea Post",
"Cafe Choco Craze",
"Tea Post",
"VarieTEA",
"Shambhu's Coffee Bar",
"Cafe Bistro",
"VINDHY DIESEL"
};
public static double[] latitude = {
23.0346127,
23.03442,
23.023698,
23.026442,
23.0265124,
23.0278811,
23.0279729,
23.02661,
23.0245552,
23.023697,
23.0327193,
23.0274545,
23.0267522,
23.032797,
23.032949,
23.0328851,
23.0342291,
23.0346067,
23.0316215,
23.0364135,
23.022466,
23.0295243,
23.0267201,
23.032942,
23.026501,
23.0263833,
23.031884,
23.0269466,
23.021192,
23.0135894,
23.02432,
23.0240128,
23.024619,
23.026778,
23.029108,
23.0238884,
23.020605,
23.0177346,
23.027182,
23.014553,
22.3197268,
22.3089077,
22.3085821,
22.3222568,
22.3198165,
22.3139243,
22.318879,
22.2657898,
22.3119221,
22.3227036,
22.3229247,
22.3081728,
22.3089072,
22.3092628,
22.309126,
22.3076029,
22.3140611,
22.3000499,
22.299744,
22.2944157
};
public static double[] longitude = {
72.5603133,
72.552969,
72.5578204,
72.558209,
72.5582468,
72.5589269,
72.5589992,
72.558243,
72.5563425,
72.557825,
72.5576944,
72.5525569,
72.5527051,
72.5552899,
72.560003,
72.5552652,
72.5610474,
72.5547168,
72.5494911,
72.5542487,
72.567606,
72.5639043,
72.5816552,
72.565376,
72.558418,
72.5722343,
72.5701695,
72.5817172,
72.571519,
72.5703757,
72.564846,
72.5677543,
72.582249,
72.569417,
72.57725,
72.5679344,
72.5641849,
72.5672064,
72.581723,
72.565815,
73.1878901,
73.1842133,
73.1842554,
73.1657857,
73.1881908,
73.1749709,
73.187999,
73.2014989,
73.1851539,
73.1869685,
73.1868308,
73.1840998,
73.1842245,
73.1851746,
73.175054,
73.1709922,
73.169345,
73.1694628,
73.169574,
73.1761437
};

MapActivity.java

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback, ClusterManager.OnClusterItemInfoWindowClickListener<MyItem> {
// Declare a variable for the cluster manager.
private ClusterManager<MyItem> mClusterManager;
private GoogleMap mMap;
private MyItem clusterItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
// Obtain the SupportMapFragment and get notified when the map is ready to be used.
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
setUpCluster();
public class MapsActivity extends FragmentActivity implements OnMapReadyCallback, ClusterManager.OnClusterItemInfoWindowClickListener<MyItem> {
// Declare a variable for the cluster manager.
private ClusterManager<MyItem> mClusterManager;
private GoogleMap mMap;
private MyItem clusterItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
// Obtain the SupportMapFragment and get notified when the map is ready to be used.
SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
}
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
setUpCluster();
}
private void setUpCluster() {
// Position the map.
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(22.7483221, 72.88330078), 5));
mClusterManager = new ClusterManager<MyItem>(this, mMap);
mMap.setOnCameraIdleListener(mClusterManager);
mMap.setOnMarkerClickListener(mClusterManager);
mMap.setInfoWindowAdapter(mClusterManager.getMarkerManager());
mClusterManager
.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
@Override
public boolean onClusterItemClick(MyItem item) {
clusterItem = item;
return false;
}
});
addItems();
mClusterManager.getMarkerCollection().setOnInfoWindowAdapter(
new MarkerAdapter());
// Add cluster items (markers) to the cluster manager.
addItems();
}
private void addItems() {
// Add ten cluster items in close proximity, for purposes of this example.
for (int i = 0; i < Constants.latitude.length; i++) {
PlaceType placeType = PlaceType.CAFE;
if (i >= 20 && i <= 39) {
placeType = PlaceType.RESTAURANT;
}
MyItem offsetItem = new MyItem(Constants.latitude[i], Constants.longitude[i], Constants.name[i], placeType);
mClusterManager.addItem(offsetItem);
}
}
//added with edit
@Override
public void onClusterItemInfoWindowClick(MyItem myItem) {
Toast.makeText(this, myItem.getName() + " Clicked", Toast.LENGTH_SHORT).show();
}
public class MarkerAdapter implements GoogleMap.InfoWindowAdapter {
private final View myContentsView;
MarkerAdapter() {
myContentsView = getLayoutInflater().inflate(
R.layout.item_info_window, null);
}
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
TextView tvTitle = ((TextView) myContentsView
.findViewById(R.id.txtTitle));
ImageView ivPlace = ((ImageView) myContentsView
.findViewById(R.id.ivPlace));
tvTitle.setText(clusterItem.getName());
ivPlace.setImageResource(clusterItem.getPlaceType() == PlaceType.RESTAURANT ? R.drawable.ic_food : R.drawable.ic_cafe);
return myContentsView;
}
}
} }
private void setUpCluster() {
// Position the map.
mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(22.7483221, 72.88330078), 5));
mClusterManager = new ClusterManager<MyItem>(this, mMap);
mMap.setOnCameraIdleListener(mClusterManager);
mMap.setOnMarkerClickListener(mClusterManager);
mMap.setInfoWindowAdapter(mClusterManager.getMarkerManager());
mClusterManager
.setOnClusterItemClickListener(new ClusterManager.OnClusterItemClickListener<MyItem>() {
@Override
public boolean onClusterItemClick(MyItem item) {
clusterItem = item;
return false;
}
});
addItems();
mClusterManager.getMarkerCollection().setOnInfoWindowAdapter(
new MarkerAdapter());
// Add cluster items (markers) to the cluster manager.
addItems();
}
private void addItems() {
// Add ten cluster items in close proximity, for purposes of this example.
for (int i = 0; i < Constants.latitude.length; i++) {
PlaceType placeType = PlaceType.CAFE;
if (i >= 20 && i <= 39) {
placeType = PlaceType.RESTAURANT;
}
MyItem offsetItem = new MyItem(Constants.latitude[i], Constants.longitude[i], Constants.name[i], placeType);
mClusterManager.addItem(offsetItem);
}
}
//added with edit
@Override
public void onClusterItemInfoWindowClick(MyItem myItem) {
Toast.makeText(this, myItem.getName() + " Clicked", Toast.LENGTH_SHORT).show();
}
public class MarkerAdapter implements GoogleMap.InfoWindowAdapter {
private final View myContentsView;
MarkerAdapter() {
myContentsView = getLayoutInflater().inflate(
R.layout.item_info_window, null);
}
@Override
public View getInfoWindow(Marker marker) {
return null;
}
@Override
public View getInfoContents(Marker marker) {
TextView tvTitle = ((TextView) myContentsView
.findViewById(R.id.txtTitle));
ImageView ivPlace = ((ImageView) myContentsView
.findViewById(R.id.ivPlace));
tvTitle.setText(clusterItem.getName());
ivPlace.setImageResource(clusterItem.getPlaceType() == PlaceType.RESTAURANT ? R.drawable.ic_food : R.drawable.ic_cafe);
return myContentsView;
}
}
}

activity_map.xml

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.google.map.clustering.MapsActivity" />

And Done!

Now when you run the demo, it’ll look like this:

Google Map Marker Android Tutorial

Android Google App Marker

 

Android Google Map Marker

You’ve just scratched the utilities of Google Map features. However, this is not it, you can add many more functionalities in your Android app such as creating custom Google Map Marker, helper method to work with GeoJSON, and adding overlays for KML data.

These functionalities basically help you offer interesting functionalities in your native Android app or startup app to enhance user experience. And if you wish to add them, and need technical assistance, you can contact us to hire Android app developer from us.

Grab a free copy of Google Map Marker demo from Github.

This page was last edited on May 31st, 2018, at 2:07.
 
0
Shares
 

Any Questions? Contact us Now.

Get your free consultation now