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.

• Set Up Google Cloud Messaging Service For Android - Part One 
• Set Up PHP Form For Cloud Messaging Service In Google: Part Two
• Set Up Google Cloud Messaging Service In Android Studio: Part Three

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.
   
   
   

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,



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.
   
   
   

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

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

Code:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<uses-feature
   android:glEsVersion="0x00020000"
   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:

<meta-data
    android:name="com.google.android.gms.version"
    android:value="@integer/google_play_services_version" />
<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    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:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:id="@+id/main_layout_map"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >
        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.MapFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
</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:

package com.khawarislam.mainpage.Model;

/**
 * Created by Hi on 4/25/2016.
 */
public class Branch {
    public String getBranch_name() {
        return branch_name;
    }

    public void setBranch_name(String branch_name) {
        this.branch_name = branch_name;
    }

    public String getBranch_address() {
        return branch_address;
    }

    public void setBranch_address(String branch_address) {
        this.branch_address = branch_address;
    }

    public String getBranch_phone() {
        return branch_phone;
    }

    public void setBranch_phone(String branch_phone) {
        this.branch_phone = branch_phone;
    }

    public double getLatitude() {
        return latitude;
    }

    public void setLatitude(double latitude) {
        this.latitude = latitude;
    }

    public double getLongitude() {
        return longitude;
    }

    public void setLongitude(double longitude) {
        this.longitude = longitude;
    }

    private String branch_name;
    private String branch_address;
    private String branch_phone;
    private double latitude;
    private double longitude;
}

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:

package com.khawarislam.mainpage.Model;

import java.util.ArrayList;

/**
 * Created by Hi on 4/25/2016.
 */
public class BranchDatasource {

    public ArrayList<Branch> getList() {

        ArrayList<Branch> array_list = new ArrayList<Branch>();

        Branch branch1 = new Branch();
        branch1.setBranch_name("Korangi");
        branch1.setBranch_phone("0212566554");
        branch1.setBranch_address("ST-6/4, Sec. 24, Chamra Chowrangi, Korangi Industrial Area");
        branch1.setLatitude(24.880378);
        branch1.setLongitude(67.052693);
        array_list.add(branch1);

        Branch branch2 = new Branch();
        branch2.setBranch_name("Gulshan-e-Iqbal");
        branch2.setBranch_phone("0212566554");
        branch2.setBranch_address("36-B, Hina Centre, Gulshan-e-Iqbal");
        branch2.setLatitude(24.894393);
        branch2.setLongitude(67.108226);
        array_list.add(branch2);

        Branch branch3 = new Branch();
        branch3.setBranch_name("Clifton Branch");
        branch3.setBranch_phone("0212566554");
        branch3.setBranch_address("QM Building, Plot# BC 15, Block, Khayaban-e-Roomi, Clifton");
        branch3.setLatitude(24.914789);
        branch3.setLongitude(67.064624);
        array_list.add(branch3);

        Branch branch4 = new Branch();
        branch4.setBranch_name("Gulistan-e-Johar");
        branch4.setBranch_phone("0212566554");
        branch4.setBranch_address("Rashid Minhas Road, Gulistan-e-Joha");
        branch4.setLatitude(24.895716);
        branch4.setLongitude(67.031751);
        array_list.add(branch4);

        Branch branch5 = new Branch();
        branch5.setBranch_name("Atrium Mall");
        branch5.setBranch_phone("0212566554");
        branch5.setBranch_address("249, Staff Lines, Zaib un Nisa Street, Saddar");
        branch5.setLatitude(24.935883);
        branch5.setLongitude(67.048659);
        array_list.add(branch5);

        return array_list;
    }
}

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:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

   <!-- Action bar -->

   <RelativeLayout style="@style/MyActionBar" >

      <TextView
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:text="Branch Detail"
          android:textColor="#ffffff"
          android:textSize="20sp" />
   </RelativeLayout>

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:layout_weight="1"
       android:orientation="vertical"
       android:padding="10dp" >

      <TextView
          android:id="@+id/branchDetail_textView_name"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="Branch Name" />

      <TextView
          android:id="@+id/branchDetail_textView_address"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="Branch Address" />
   </LinearLayout>

   <LinearLayout
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:padding="10dp" >

      <Button
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:onClick="onClick_call"
          android:text="Call" />
   </LinearLayout>

</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:

package com.khawarislam.mainpage.Model;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.khawarislam.mainpage.R;

public class BranchDetailActivity extends Activity {

    public static Branch BRANCH;
    TextView tvBranchName;
    TextView tvBranchAddress;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_branch_detail);
        tvBranchName = (TextView) findViewById(R.id.branchDetail_textView_name);
        tvBranchAddress = (TextView) findViewById(R.id.branchDetail_textView_address);

        tvBranchName.setText(BRANCH.getBranch_name());
        tvBranchAddress.setText(BRANCH.getBranch_address());
    }

    public void onClick_call(View view) {
        dialPhoneNumber(BRANCH.getBranch_phone());
    }

    public void dialPhoneNumber(String phoneNumber) {
        Intent intent = new Intent(Intent.ACTION_DIAL);
        intent.setData(Uri.parse("tel:" + phoneNumber));
        if (intent.resolveActivity(getPackageManager()) != null) {
            startActivity(intent);
        }
    }
}

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:

package com.khawarislam.mainpage.Model;

import android.app.Activity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.CameraPosition;
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.khawarislam.mainpage.R;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;



public class BranchActivity extends Activity {

    private GoogleMap mMap;
    private ArrayList<Branch> array_list;
    private Map<Marker, Branch> mMarkerHashMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_branch);
        setupMap();
    }


    private void setupMap() {
        mMarkerHashMap = new HashMap<Marker, Branch>();
        BranchDatasource mBranchDatasource = new BranchDatasource();
        array_list = mBranchDatasource.getList();
        mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();

        for (Branch item : array_list) {
            String _title = item.getBranch_name();
            String _snippet = item.getBranch_address();
            LatLng _latLng = new LatLng(item.getLatitude(), item.getLongitude());
            MarkerOptions mMarkerOptions = new MarkerOptions();
            mMarkerOptions.position(_latLng).title(_title).snippet(_snippet).flat(true);
            Marker marker = mMap.addMarker(mMarkerOptions);
            mMarkerHashMap.put(marker, item);

            CameraPosition cameraPosition = new CameraPosition.Builder()
                    .target(marker.getPosition())
                    .zoom(11.0f)
                    .build();
            mMap.animateCamera(CameraUpdateFactory
                    .newCameraPosition(cameraPosition));
        }

        mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {
            @Override
            public void onInfoWindowClick(Marker marker) {
                Intent mIntent = new Intent(BranchActivity.this, BranchDetailActivity.class);
                BranchDetailActivity.BRANCH = mMarkerHashMap.get
                        (marker);
                startActivity(mIntent);
            }
        });
    }




}

Visual Representation 

Read more articles on Android:

• Basics Of Services In Android - Part 1
• Rating Bar In Android