Google Maps Android API v2 - Tutorial

1. Google Maps

1.1. MapsView

Google provides via Google play a library for using Google Maps in your application. The following description is based on the Google Maps Android API v2 which provides significant improvements to the older API version.
The library provides the com.google.android.gms.maps.MapFragment class and the MapView class for displaying the map component.
You need to add additional information to your AndroidManifest.xml file to use Google Maps. 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.vogella.android.locationapi.maps"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="17" />

    <permission
        android:name="com.example.mapdemo.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.sample.android.locationapi.maps.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="your_apikey" />
    </application>

</manifest>

1.2. MapFragment

The MapFragment class extends the Fragment class and provides the life-cycle management and the services for displaying a GoogleMap widget. GoogleMap is the class which shows the map. The MapFragment has the getMap() method to access this class.
the LatLng class can be used to interact with the GoogleView class.

1.3. Markers

You can create markers on the map via the Marker class. This class can be highly customized.
The following code shows an example.

public class MainActivity extends Activity {
  static final LatLng HAMBURG = new LatLng(53.558, 9.927);
  static final LatLng KIEL = new LatLng(53.551, 9.993);
  private GoogleMap map;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map))
        .getMap();
    
    if (map!==null){
      Marker hamburg = map.addMarker(new MarkerOptions().position(HAMBURG)
          .title("Hamburg"));
      Marker kiel = map.addMarker(new MarkerOptions()
          .position(KIEL)
          .title("Kiel")
          .snippet("Kiel is cool")
          .icon(BitmapDescriptorFactory
              .fromResource(R.drawable.ic_launcher)));
    }
    
  }

On the GoogleMap you can register a listener for the markers in your map via the setOnMarkerClickListener(OnMarkerClickListener) method. The OnMarkerClickListener class defines the onMarkerClicked(Marker) method which is called if a marker is clicked.
Similar to you also listen to drag events and info window clicks.

1.4. Changing the GoogleView

The GoogleMap can be highly customized.
The following example code is taken from the offical Google webpage. 

static final LatLng HAMBURG = new LatLng(53.558, 9.927);
static final LatLng KIEL = new LatLng(53.551, 9.993);

private GoogleMap map;
... // Obtain the map from a MapFragment or MapView.

//Move the camera instantly to hamburg with a zoom of 15.
map.moveCamera(CameraUpdateFactory.newLatLngZoom(HAMBURG, 15));

// Zoom in, animating the camera.
map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);

1.5. Android emulator and Google Maps

Unfortunately for using the Google Maps you have to test the application on a real device as the emulator is not supported.

2. Install Google Play services

Open the Android SDK Manager and install Extras → Google Play services

Install Google Services

Import the library which was downloaded into Eclipse via File → Import → Android → Existing Android Code into Workspace.
To use this library define a library dependency in your Android project.

3. Getting the Google Map key

3.1. Overview

To use Google Maps you need to create a valid Google Maps API key. The key is free, you can use it with any of your applications that call the Maps API, and it supports an unlimited number of users.
You get this key via the so-called Google APIS Console. You have to provide your application signature key and the application package name.
This is based on the key with which you sign your Android application during deployment. During development with Eclipse, Eclipse us automatically creates and uses a debug key.

3.2. Creating the SHA-1 for your signature key

The Eclipse debug key for signing your application can be found in the userhome/.android/debug.keystore file.
To create the SHA-1 for your debug keystore you use the keytool command from your JDK installation pointing to the debug.keystore file. 

keytool -list -v -alias androiddebugkey \
-keystore <path_to_debug_keystore>debug.keystore \
-storepass android -keypass android

Copy the SHA-1 output, as you need this later.

3.3. Register with the Google APIs Console

You have to register in the Google APIs Console that you want to use Google Maps for Android. You can reach this console via the following link: Google APIs Console . Select here the Services entry.

Google APIs Console

Activate the Google Maps Android API v2.

Google APIs Console

3.4. Create key for your application

You need later to register your application via its package in this console together with the SHA-1 fingerprint of your signature key. For this you select the entry and click on the API Access entry. Afterwards click on the Create new Android key... entry.


Enter your SHA-1 fingerprint and the package of your application separated by a semicolon. For example you can use the com.vogella.android.locationapi.maps package.


The procedure is described in detail in the following link: Getting a Google Maps key .

4. Tutorial: Google Maps

4.1. Create Project

In the following chapter we will build an Android application which shows a GoogleMap.
Create a new Android project called com.vogella.android.locationapi.maps with an Activity called ShowMapActivity.
Change the AndroidManifest.xml file to the following code. Add the following permissions to your application. 

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sample.android.locationapi.maps"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="17"
        android:targetSdkVersion="17" />

    <permission
        android:name="com.example.mapdemo.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.sample.android.locationapi.maps.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="your_apikey" />
    </application>

</manifest>

Get a valid API key for your application and enter this key in the AndroidManifest.xml file.

4.2. Adjust layout file AndroidManifest.xml

In this example we use the MapFragment. Change your layout file to the following code. 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

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

</RelativeLayout>

4.3. Activity

Change your Activity to the following. 

package com.sample.android.locationapi.maps;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

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.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends Activity {
  static final LatLng HAMBURG = new LatLng(53.558, 9.927);
  static final LatLng KIEL = new LatLng(53.551, 9.993);
  private GoogleMap map;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map))
        .getMap();
    Marker hamburg = map.addMarker(new MarkerOptions().position(HAMBURG)
        .title("Hamburg"));
    Marker kiel = map.addMarker(new MarkerOptions()
        .position(KIEL)
        .title("Kiel")
        .snippet("Kiel is cool")
        .icon(BitmapDescriptorFactory
            .fromResource(R.drawable.ic_launcher)));

    // Move the camera instantly to hamburg with a zoom of 15.
    map.moveCamera(CameraUpdateFactory.newLatLngZoom(HAMBURG, 15));

    // Zoom in, animating the camera.
    map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
  }

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_main, menu);
    return true;
  }

}

4.4. Run and Test

Run and test your application. You should be able to zoom in and out and send new geo coordinates to your Activity via the Emulator.


5. Thank you

Comments

Post a Comment

Popular posts from this blog

How to draw an overlay on a SurfaceView used by Camera on Android?

Solution 1: I have a simple program that draws the preview of the Camera into a SurfaceView . What I'm trying to do is using the onPreviewFrame method, which is invoked each time a new frame is drawn into the SurfaceView , in order to execute the invalidate method which is supposed to invoke the onDraw method. In fact, the onDraw method is being invoked, but nothing there is being printed (I guess the camera preview is overwriting the text I'm trying to draw). This is a simplify version of the SurfaceView subclass I have: public class Superficie extends SurfaceView implements SurfaceHolder . Callback { SurfaceHolder mHolder ; public Camera camera ; Superficie ( Context context ) { super ( context ); mHolder = getHolder (); mHolder . addCallback ( this ); mHolder . setType ( SurfaceHolder . SURFACE_TYPE_PUSH_BUFFERS ); } public void surfaceCreated ( final SurfaceHolder holder ) { camera = Camera . open (); try {
Read more

Android TCP Connection Chat application

Image
1. Make the Server in Java To create the server create a new project in Java and make a class called "TCPServer". In this class put the following code: UPDATED 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 import javax.swing.*; import java.io.*; import java.net.ServerSocket; import java.net.Socket;   /**   * The class extends the Thread class so we can receive and send messages at the same time   */ public class TCPServer extends Thread {        public static final int SERVERPO
Read more

Create EditText with dropdown in android

EditText is a view which is used so frequently in Android application,specially in applications which has forms which allow user to fill information of any kind. When you have filled any form you must have a faced an problem (specially on mobile devices) ie. deleting the text written in EditText and prepare editable dropdown which allows to enter manual data with dropdown. So I have created my own custom EditText ie. DropDownEditText.This customized view contains a Button inside the EditText itself. So just on pressing this Button only once you can populate the dropdown with ArrayAdapter. So here my code goes… First XML code for customized view. dropdown_edit_text.xml <?xml version=”1.0″ encoding=”utf-8″?> <RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"; android:layout_width=”fill_parent” android:layout_height=”wrap_content” > <EditText android:id=”@+id/dropdown_edit” android:layout_width=”fill_parent” androi
Read more