Bài 54: Google Maps Android API – phần 2

[polldaddy poll=9764234]

Ở bài tập 53 Tui đã trình bày sơ lược về GMAA, để rõ hơn bạn nhớ vào link sau để đọc https://developers.google.com/maps/documentation/android/intro (link này có hướng dẫn chi tiết và những ví dụ mẫu rất dễ hiểu).

Trong bài tập này Tui sẽ hướng dẫn các bạn cách đưa Google Map vào ứng dụng Android của mình như thế nào, có nhiều bước khác nhau để sử dụng, ở đây Tui tạm liệt kê theo thứ tự như sau (không hẳn là tốt nhất):

Bước 1:

Kiểm tra hệ thống đã có cài đặt gói Google API và Google Play Service chưa? nếu chưa có thì cần cài đặt.

Kiểm tra như sau: Mở cửa sổ Android SDK Manager lên (Bài 1):

Bạn quan sát hình trên xem có Google APIs tương ứng với các version hay chưa (tùy bạn cài đặt, không nhất thiết phải giống như hình Tui chụp). Tiếp theo kéo xuống mục Extras để kiểm tra Google Play Service:

Nếu nó chưa được cài đặt thì bạn phải cài đặt cho đầy đủ.

Khi cài đặt thành công thì bạn có thể tìm thấy nó ở đây “..\sdk\extras\google\google_play_services\libproject\google-play-services_lib”:

Bước 2:

– Tạo máy Ảo có khả năng chạy được Google Map:

Như bạn thấy máy Tui có Google APIs từ 17->21, bạn tạo máy ảo với một trong nhóm này để nó có thể chạy được với Google Map. Chú ý là bạn không cần thiết phải lấy bản 21 nhé, ở đây Tui lỡ tải về rồi nên chụp cho nó màu mè thôi. Bạn chạy với bản 19 cũng rất Ok rồi.  Bản 21 phải yêu cầu bật tính năng ảo hóa nên chưa chắc máy của bạn chạy được.

Bước 3:

Import thư viện google-play-services_lib ở Bước 1 vào Eclipse. Bước này bạn nên copy đường dẫn rồi dán vào cửa sổ import cho lẹ nhé: Sau đó Import Project này vào Elipse như sau:

Vào menu File/ Chọn Import:

Màn hình Import Project hiển thị ra như bên dưới, ta chọn Android/Existing Android Code into Workspace:

Bấm next để tiếp tục:

Root Directory: Bạn dán đường dẫn đã copy lúc nãy vào đây rồi nhấn phím Enter nó sẽ hiển thị ra Google-play-service_lib ở trong mục Projects.

Copy projects into workspace: Bạn nhớ tick vào đây.

Sau đó nhấn nút Finish để kết thúc quá trình Import:

Bước 4:

Tạo Project Android tên “LearnGoogleMap” sử dụng Google Map để tham chiếu tới Google Play Service tạo ở bước 3.

Sau khi tạo Project LearnGoogleMap xong thì nhấn chuột phải vào nó chọn Properties:

Màn Properties hiển thị ra ta chọn Android/ chọn nút Add trong mục Library:

Khi bấm nút Add–> màn hình sau xuất hiện, ta chọn google play service:

Bấm OK để đồng ý tham chiếu, ta xem kết quả:

Bước 5:

Cấu hình để sử dụng Google Map trong ứng dụng LearnGoogleMap:

– Ta cần tìm chuỗi SHA1 để tạo API KEY sử dụng Google map trước, để có SHA1 ta làm như sau:

Mở màn hình Command Line lên, copy và gõ lệnh sau (không sửa gì nhé):

keytool -list -v -keystore “%USERPROFILE%\.android\debug.keystore” -alias androiddebugkey -storepass android -keypass android

Từ màn hình Command line, ta dán lệnh trên vào:

Nhấn Enter và có kết quả SHA1 như sau:

Ta sao chép SHA1 được cung cấp ở trên.

Ngoài ra Eclipse đã hỗ trợ cho chúng ta cách lấy SHA1 vô cùng dễ òm như sau:

Vào menu Windows/Chọn Preference:

Bạn copy luôn chuỗi SHA1 đó, chú ý là chuỗi này tương ứng với mỗi cấu hình máy là khác nhau, khi đưa lên Google project cùng với Package nó sẽ tạo ra API KEY khác nhau và duy nhất.

Tiếp theo bạn vào https://code.google.com/apis/console để lấy API KEY dựa theo SHA1 được cung cấp ở trên.

Bạn chó ý là API KEY được tạo ra dựa trên sự kết hợp giữa SHA1 và package mà bạn tạo ra trong Android. ở Project trên Package tui như sau:

“tranduythanh.com.learngooglemap” nó sẽ kết hợp với SHA1 để tạo ra API KEY. Như vậy nếu bạn đặt tên theo package nào thì phải theo package đó nha.

Ở bài tập 50 Tui cũng đã hướng dẫn dùng Google Project với bài Google Cloud Message, bạn có thể tự xem lại cách tạo Project (Nhớ xem lại nếu chưa biết tạo sử dụng, ở đây Tui mặc định bạn đã biết vì Tui đã hướng dẫn chi tiết trong bài 50 – Do đó nếu không thấy màn hình dưới đây tức là bạn chưa học bài tập 50).

Kích hoạt Google MAP Android API V2 lên (tùy vào version khác nhau mà Google có thể đổi giao diện khác chút xíu, miễn sao bạn nhìn thấy nó là OK):

– Bạn vào mục API, kéo xuống tìm Google Máp Android API v2 để bật ON nó lên:

Bật xong sẽ thấy:

Sau đó vào mục Credentials/ chọn Create New Key:

Khi bấm vào Create New Key màn hình sau xuất hiện:

Ở màn hình trên bạn chọn Android Key, màn hình tiếp theo xuất hiện:

Sau khi bấm Create, ta có kết quả sau:

– Vậy là ta đã có API KEY.

– Ta tiến hành sửa AndroidManifest như sau (Tui sao chép vào luôn, ý nghĩa Tui đã nói trong bài 53 rồi):

[code language=”xml”]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="tranduythanh.com.learngooglemap"
    android:versionCode="1"
    android:versionName="1.0" >

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

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <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="AIzaSyAs7FEF1RxuoSat_oHITBirDKagx2nQKDM" />

        <activity
            android:name=".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>
    </application>

</manifest>
[/code]

Tiếp theo tiến hành chỉnh sửa activity_main.xml:

[code language=”xml”]
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="tranduythanh.com.learngooglemap.MainActivity" >
 <fragment
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.google.android.gms.maps.MapFragment"
    />
</LinearLayout>

[/code]

Coding java Ta không sửa gì hết nhá (Tức là cứ để mặc định, chỉ sửa lại mỗi Layout XML mà thôi.

Sau khi sửa xong ta tiến hành chạy Ứng Dụng,  bạn sẽ thấy Google Map hiển thị trong ứng dụng. Dĩ nhiên là chỉ mới hiển thị cho ta ngó đỡ ghiền chứ chưa làm được gì cả:

Như vậy đến đây các bạn đã biết cách đưa Google Map ra ứng dụng, bạn cần hiểu rõ từng bước để tránh sai sót. Phải nhớ bước lấy SHA1, API KEY, bước cấu hình Manifest và layout có sử dụng class=”com.google.android.gms.maps.MapFragment”

Bài tiếp theo Tui sẽ hướng dẫn các bạn cách tương tác với Google Map

Bạn có thể tải source code mẫu ở đây (dĩ nhiên bạn không thể nào chạy trên máy của bạn được) vì nó lệ thuộc vào API KEY, mà API KEY lại lệ thuộc vào SHA1 và package…. do đó khi bạn tải về thì phải làm lại các bước để lấy đúng API KEY theo cấu hình trên máy của bạn:  http://download939.mediafire.com/aykl9wqptuwg/9b9fz5c36yw025h/LearnGoogleMap.rar

Các bạn chú ý theo dõi

Chúc các bạn thành công.