Introduction

Today, I am writing an 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 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 an Android Tutorial App Project and we can use it. If you don’t have any idea about this please see my previous articles to clear up 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 the 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 added 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" />
  4. <uses-feature
  5. android:glEsVersion="0x00020000"
  6. android:required="true" />
Meta-data
The meta-data is also add in in metadata 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 a new XML file into the layout section and named as activity_branch.xml and add the following code in it. In this code, we declare 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 the 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;
  3. /**
  4. * Created by Hi on 4/25/2016.
  5. */
  6. public class Branch {
  7. public String getBranch_name() {
  8. return branch_name;
  9. }
  11. public void setBranch_name(String branch_name) {
  12. this.branch_name = branch_name;
  13. }
  15. public String getBranch_address() {
  16. return branch_address;
  17. }
  19. public void setBranch_address(String branch_address) {
  20. this.branch_address = branch_address;
  21. }
  23. public String getBranch_phone() {
  24. return branch_phone;
  25. }
  27. public void setBranch_phone(String branch_phone) {
  28. this.branch_phone = branch_phone;
  29. }
  31. public double getLatitude() {
  32. return latitude;
  33. }
  35. public void setLatitude(double latitude) {
  36. this.latitude = latitude;
  37. }
  39. public double getLongitude() {
  40. return longitude;
  41. }
  43. public void setLongitude(double longitude) {
  44. this.longitude = longitude;
  45. }
  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 a new Java class in the class section and named BranchDatasource.java class. In this class, we set our static attributes which we want to show on the map.
Code
  1. package com.khawarislam.mainpage.Model;
  3. import java.util.ArrayList;
  5. /**
  6. * Created by Hi on 4/25/2016.
  7. */
  8. public class BranchDatasource {
  10. public ArrayList<Branch> getList() {
  12. ArrayList<Branch> array_list = new ArrayList<Branch>();
  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);
  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);
  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);
  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);
  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);
  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" >
  6. <!-- Action bar -->
  8. <RelativeLayout style="@style/MyActionBar" >
  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>
  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" >
  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" />
  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>
  39. <LinearLayout
  40. android:layout_width="fill_parent"
  41. android:layout_height="wrap_content"
  42. android:orientation="vertical"
  43. android:padding="10dp" >
  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>
  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 the call button then the call is starting.
Code
  1. package com.khawarislam.mainpage.Model;
  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;
  10. import com.khawarislam.mainpage.R;
  12. public class BranchDetailActivity extends Activity {
  14. public static Branch BRANCH;
  15. TextView tvBranchName;
  16. TextView tvBranchAddress;
  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);
  25. tvBranchName.setText(BRANCH.getBranch_name());
  26. tvBranchAddress.setText(BRANCH.getBranch_address());
  27. }
  29. public void onClick_call(View view) {
  30. dialPhoneNumber(BRANCH.getBranch_phone());
  31. }
  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 a new Java file and name it as branchAcitivty.java class. In this class, we set up 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;
  3. import android.app.Activity;
  5. import android.app.Activity;
  6. import android.content.Intent;
  7. import android.os.Bundle;
  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;
  19. import java.util.ArrayList;
  20. import java.util.HashMap;
  21. import java.util.Map;
  23. public class BranchActivity extends Activity {
  25. private GoogleMap mMap;
  26. private ArrayList<Branch> array_list;
  27. private Map<Marker, Branch> mMarkerHashMap;
  29. @Override
  30. protected void onCreate(Bundle savedInstanceState) {
  31. super.onCreate(savedInstanceState);
  32. setContentView(R.layout.activity_branch);
  33. setupMap();
  34. }
  35. private void setupMap() {
  36. mMarkerHashMap = new HashMap<Marker, Branch>();
  37. BranchDatasource mBranchDatasource = new BranchDatasource();
  38. array_list = mBranchDatasource.getList();
  39. mMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
  41. for (Branch item : array_list) {
  42. String _title = item.getBranch_name();
  43. String _snippet = item.getBranch_address();
  44. LatLng _latLng = new LatLng(item.getLatitude(), item.getLongitude());
  45. MarkerOptions mMarkerOptions = new MarkerOptions();
  46. mMarkerOptions.position(_latLng).title(_title).snippet(_snippet).flat(true);
  47. Marker marker = mMap.addMarker(mMarkerOptions);
  48. mMarkerHashMap.put(marker, item);
  50. CameraPosition cameraPosition = new CameraPosition.Builder()
  51. .target(marker.getPosition())
  52. .zoom(11.0f)
  53. .build();
  54. mMap.animateCamera(CameraUpdateFactory
  55. .newCameraPosition(cameraPosition));
  56. }
  58. mMap.setOnInfoWindowClickListener(new GoogleMap.OnInfoWindowClickListener() {
  59. @Override
  60. public void onInfoWindowClick(Marker marker) {
  61. Intent mIntent = new Intent(BranchActivity.this, BranchDetailActivity.class);
  62. BranchDetailActivity.BRANCH = mMarkerHashMap.get
  63. (marker);
  64. startActivity(mIntent);
  65. }
  66. });
  67. }
  68. }
Visual Representation
output
Read more articles on Android