Set Up Map API Service In GCM And Configure In Android Studio

Introduction

Today, I am writing article on Google Map API. In this article basically we set the name, address and location of some places and when we run the app the app is pointing to these places and the popup shows this location. Now first we set up the Google Cloud Platform. In my previous article I created Android Tutorial App Project and we can use it. If you don’t have any idea about this please see my previous articles to clearup  some steps easily.

Creating a Google API project

To create a Google API project:
  1. Open the Google Developers Console.
  2. If you haven't created an API project yet, click Create Project.
  3. Supply a project name and click Create.
  4. If you have already a project then click on Enable and Manage API.

    enable

Enabling the MAPS Service

Now Click on Google Map Android API. You see the enable button, press this button and now your Map API is enabled,

enable

Obtaining an API Key

To obtain an API key:

  1. In the sidebar, select APIs & auth > Credentials.
  2. Under Public API access, click Create new key.
  3. In the Create a new key dialog, click Android key.
  4. Click Create.
  5. In the refreshed page, copy the API key. You will need the API key later in your Manifest meta-data.

    meta-data

Edit Application's Manifest: Permissions, Meta-Data & Features

All the permissions meta-data and features are add in AndroidManifest.xml file.

Code:

  1. <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  
  2. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
  3.   
  4. <uses-feature  
  5.    android:glEsVersion="0x00020000"  
  6.    android:required="true" />  
Meta-data

The meta-data is also add in in meta data file you see that the value tag add the API Key which is generated by GCM with your project copy it and paste it here

Code:
  1. <meta-data  
  2.     android:name="com.google.android.gms.version"  
  3.     android:value="@integer/google_play_services_version" />  
  4. <meta-data  
  5.     android:name="com.google.android.maps.v2.API_KEY"  
  6.     android:value="AIzaSyBMpu5vpYKpmhZTxwsmNztQyOLUBizRTq4" />  
Add activity_branch.xml

Add new xml file into layout section and named as activity_branch.xml and add following code in it. In this code we declare a one linear layout and second is fragment basically fragment show the Map fragment in it.

Code:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent"  
  4.     android:orientation="vertical">  
  5.     <LinearLayout  
  6.         android:id="@+id/main_layout_map"  
  7.         android:layout_width="fill_parent"  
  8.         android:layout_height="fill_parent"  
  9.         android:orientation="vertical" >  
  10.         <fragment  
  11.             android:id="@+id/map"  
  12.             android:name="com.google.android.gms.maps.MapFragment"  
  13.             android:layout_width="match_parent"  
  14.             android:layout_height="match_parent" />  
  15.     </LinearLayout>  
  16. </LinearLayout>  
Add Branch.java Class

Add New Java file into class section and named as add Branch.java class and add some attributes and then make getter and setter methods; furthermore we use these properties to set our static attributes like name, address etc.

Code:
  1. package com.khawarislam.mainpage.Model;  
  2.   
  3. /** 
  4.  * Created by Hi on 4/25/2016. 
  5.  */  
  6. public class Branch {  
  7.     public String getBranch_name() {  
  8.         return branch_name;  
  9.     }  
  10.   
  11.     public void setBranch_name(String branch_name) {  
  12.         this.branch_name = branch_name;  
  13.     }  
  14.   
  15.     public String getBranch_address() {  
  16.         return branch_address;  
  17.     }  
  18.   
  19.     public void setBranch_address(String branch_address) {  
  20.         this.branch_address = branch_address;  
  21.     }  
  22.   
  23.     public String getBranch_phone() {  
  24.         return branch_phone;  
  25.     }  
  26.   
  27.     public void setBranch_phone(String branch_phone) {  
  28.         this.branch_phone = branch_phone;  
  29.     }  
  30.   
  31.     public double getLatitude() {  
  32.         return latitude;  
  33.     }  
  34.   
  35.     public void setLatitude(double latitude) {  
  36.         this.latitude = latitude;  
  37.     }  
  38.   
  39.     public double getLongitude() {  
  40.         return longitude;  
  41.     }  
  42.   
  43.     public void setLongitude(double longitude) {  
  44.         this.longitude = longitude;  
  45.     }  
  46.   
  47.     private String branch_name;  
  48.     private String branch_address;  
  49.     private String branch_phone;  
  50.     private double latitude;  
  51.     private double longitude;  
  52. }  
Add BranchDatasource.java Class

Add new Java class in class section and named as BranchDatasource.java class. In this class we set our static attributes which we want to show on map.

Code:
  1. package com.khawarislam.mainpage.Model;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. /** 
  6.  * Created by Hi on 4/25/2016. 
  7.  */  
  8. public class BranchDatasource {  
  9.   
  10.     public ArrayList<Branch> getList() {  
  11.   
  12.         ArrayList<Branch> array_list = new ArrayList<Branch>();  
  13.   
  14.         Branch branch1 = new Branch();  
  15.         branch1.setBranch_name("Korangi");  
  16.         branch1.setBranch_phone("0212566554");  
  17.         branch1.setBranch_address("ST-6/4, Sec. 24, Chamra Chowrangi, Korangi Industrial Area");  
  18.         branch1.setLatitude(24.880378);  
  19.         branch1.setLongitude(67.052693);  
  20.         array_list.add(branch1);  
  21.   
  22.         Branch branch2 = new Branch();  
  23.         branch2.setBranch_name("Gulshan-e-Iqbal");  
  24.         branch2.setBranch_phone("0212566554");  
  25.         branch2.setBranch_address("36-B, Hina Centre, Gulshan-e-Iqbal");  
  26.         branch2.setLatitude(24.894393);  
  27.         branch2.setLongitude(67.108226);  
  28.         array_list.add(branch2);  
  29.   
  30.         Branch branch3 = new Branch();  
  31.         branch3.setBranch_name("Clifton Branch");  
  32.         branch3.setBranch_phone("0212566554");  
  33.         branch3.setBranch_address("QM Building, Plot# BC 15, Block, Khayaban-e-Roomi, Clifton");  
  34.         branch3.setLatitude(24.914789);  
  35.         branch3.setLongitude(67.064624);  
  36.         array_list.add(branch3);  
  37.   
  38.         Branch branch4 = new Branch();  
  39.         branch4.setBranch_name("Gulistan-e-Johar");  
  40.         branch4.setBranch_phone("0212566554");  
  41.         branch4.setBranch_address("Rashid Minhas Road, Gulistan-e-Joha");  
  42.         branch4.setLatitude(24.895716);  
  43.         branch4.setLongitude(67.031751);  
  44.         array_list.add(branch4);  
  45.   
  46.         Branch branch5 = new Branch();  
  47.         branch5.setBranch_name("Atrium Mall");  
  48.         branch5.setBranch_phone("0212566554");  
  49.         branch5.setBranch_address("249, Staff Lines, Zaib un Nisa Street, Saddar");  
  50.         branch5.setLatitude(24.935883);  
  51.         branch5.setLongitude(67.048659);  
  52.         array_list.add(branch5);  
  53.   
  54.         return array_list;  
  55.     }  
  56. }  
Add activity_branch_detail.xml

Add activity_branch_detail.xml file in layout section basically when user clics on map marker then it shows a complete address with name.

Code:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="fill_parent"  
  3.     android:layout_height="fill_parent"  
  4.     android:orientation="vertical" >  
  5.   
  6.    <!-- Action bar -->  
  7.   
  8.    <RelativeLayout style="@style/MyActionBar" >  
  9.   
  10.       <TextView  
  11.           android:layout_width="wrap_content"  
  12.           android:layout_height="wrap_content"  
  13.           android:layout_centerInParent="true"  
  14.           android:text="Branch Detail"  
  15.           android:textColor="#ffffff"  
  16.           android:textSize="20sp" />  
  17.    </RelativeLayout>  
  18.   
  19.    <LinearLayout  
  20.        android:layout_width="fill_parent"  
  21.        android:layout_height="wrap_content"  
  22.        android:layout_weight="1"  
  23.        android:orientation="vertical"  
  24.        android:padding="10dp" >  
  25.   
  26.       <TextView  
  27.           android:id="@+id/branchDetail_textView_name"  
  28.           android:layout_width="fill_parent"  
  29.           android:layout_height="wrap_content"  
  30.           android:text="Branch Name" />  
  31.   
  32.       <TextView  
  33.           android:id="@+id/branchDetail_textView_address"  
  34.           android:layout_width="fill_parent"  
  35.           android:layout_height="wrap_content"  
  36.           android:text="Branch Address" />  
  37.    </LinearLayout>  
  38.   
  39.    <LinearLayout  
  40.        android:layout_width="fill_parent"  
  41.        android:layout_height="wrap_content"  
  42.        android:orientation="vertical"  
  43.        android:padding="10dp" >  
  44.   
  45.       <Button  
  46.           android:layout_width="fill_parent"  
  47.           android:layout_height="wrap_content"  
  48.           android:onClick="onClick_call"  
  49.           android:text="Call" />  
  50.    </LinearLayout>  
  51.   
  52. </LinearLayout>  
Add BranchDetailActivity.java Class

Add new class BranchDetailActivity.java. Basically when you see the location address you want to dial a phone number, so we already declared a mobile number you only want to press call button then call is starting.

Code:
  1. package com.khawarislam.mainpage.Model;  
  2.   
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.net.Uri;  
  6. import android.os.Bundle;  
  7. import android.view.View;  
  8. import android.widget.TextView;  
  9.   
  10. import com.khawarislam.mainpage.R;  
  11.   
  12. public class BranchDetailActivity extends Activity {  
  13.   
  14.     public static Branch BRANCH;  
  15.     TextView tvBranchName;  
  16.     TextView tvBranchAddress;  
  17.   
  18.     @Override  
  19.     protected void onCreate(Bundle savedInstanceState) {  
  20.         super.onCreate(savedInstanceState);  
  21.         setContentView(R.layout.activity_branch_detail);  
  22.         tvBranchName = (TextView) findViewById(R.id.branchDetail_textView_name);  
  23.         tvBranchAddress = (TextView) findViewById(R.id.branchDetail_textView_address);  
  24.   
  25.         tvBranchName.setText(BRANCH.getBranch_name());  
  26.         tvBranchAddress.setText(BRANCH.getBranch_address());  
  27.     }  
  28.   
  29.     public void onClick_call(View view) {  
  30.         dialPhoneNumber(BRANCH.getBranch_phone());  
  31.     }  
  32.   
  33.     public void dialPhoneNumber(String phoneNumber) {  
  34.         Intent intent = new Intent(Intent.ACTION_DIAL);  
  35.         intent.setData(Uri.parse("tel:" + phoneNumber));  
  36.         if (intent.resolveActivity(getPackageManager()) != null) {  
  37.             startActivity(intent);  
  38.         }  
  39.     }  
  40. }  
Add BranchActivity.java Class

Add new Java file and name it as branchAcitivty.java class. In this class we setup your marker on the map to show the place and then we declare the loop in which it iterates five places in one condition.

Code:
  1. package com.khawarislam.mainpage.Model;  
  2.   
  3. import android.app.Activity;  
  4.   
  5. import android.app.Activity;  
  6. import android.content.Intent;  
  7. import android.os.Bundle;  
  8.   
  9. import com.google.android.gms.maps.CameraUpdateFactory;  
  10. import com.google.android.gms.maps.GoogleMap;  
  11. import com.google.android.gms.maps.MapFragment;  
  12. import com.google.android.gms.maps.model.CameraPosition;  
  13. import com.google.android.gms.maps.model.LatLng;  
  14. import com.google.android.gms.maps.model.Marker;  
  15. import com.google.android.gms.maps.model.MarkerOptions;  
  16. import com.khawarislam.mainpage.R;  
  17.   
  18.   
  19. import java.util.ArrayList;  
  20. import java.util.HashMap;  
  21. import java.util.Map;  
  22.   
  23.   
  24.   
  25. public class BranchActivity extends Activity {  
  26.   
  27.     private GoogleMap mMap;  
  28.     private ArrayList<Branch> array_list;  
  29.     private Map<Marker, Branch> mMarkerHashMap;  
  30.   
  31.     @Override  
  32.     protected void onCreate(Bundle savedInstanceState) {  
  33.         super.onCreate(savedInstanceState);  
  34.         setContentView(R.layout.activity_branch);  
  35.         setupMap();  
  36.     }  
  37.   
  38.   
  39.     private void setupMap() {  
  40.         mMarkerHashMap = new HashMap<Marker, Branch>();  
  41.         BranchDatasource mBranchDatasource = new BranchDatasource();  
  42.         array_list = mBranchDatasource.getList();  
  43.         mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();  
  44.   
  45.         for (Branch item : array_list) {  
  46.             String _title = item.getBranch_name();  
  47.             String _snippet = item.getBranch_address();  
  48.             LatLng _latLng = new LatLng(item.getLatitude(), item.getLongitude());  
  49.             MarkerOptions mMarkerOptions = new MarkerOptions();  
  50.             mMarkerOptions.position(_latLng).title(_title).snippet(_snippet).flat(true);  
  51.             Marker marker = mMap.addMarker(mMarkerOptions);  
  52.             mMarkerHashMap.put(marker, item);  
  53.   
  54.             CameraPosition cameraPosition = new CameraPosition.Builder()  
  55.                     .target(marker.getPosition())  
  56.                     .zoom(11.0f)  
  57.                     .build();  
  58.             mMap.animateCamera(CameraUpdateFactory  
  59.                     .newCameraPosition(cameraPosition));  
  60.         }  
  61.   
  62.         mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {  
  63.             @Override  
  64.             public void onInfoWindowClick(Marker marker) {  
  65.                 Intent mIntent = new Intent(BranchActivity.this, BranchDetailActivity.class);  
  66.                 BranchDetailActivity.BRANCH = mMarkerHashMap.get  
  67.                         (marker);  
  68.                 startActivity(mIntent);  
  69.             }  
  70.         });  
  71.     }  
  72.   
  73.   
  74.   
  75.   
  76. }  
Visual Representation 

output

Read more articles on Android:

Up Next
    Ebook Download
    View all
    Learn
    View all