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


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

android_54_1Bạ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:

android_54_2Nế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”:

android_54_3Bước 2:

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

android_54_5Như 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.

android_54_4Bướ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é: android_54_6 Sau đó Import Project này vào Elipse như sau:

Vào menu File/ Chọn Import:

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

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

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

android_54_10Bướ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:

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

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

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

android_54_14Bướ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

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

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

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

android_54_18Bạ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:

android_54_19“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:

android_54_26

Bật xong sẽ thấy:

android_54_27

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

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

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

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

android_54_24– 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):

<?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>

Tiếp theo tiến hành chỉnh sửa activity_main.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>

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

android_54_25

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.

14 responses

  1. […] Ta tiếp tục với Project LearnGoogleMap ở bài 54. […]

  2. […] tục bài 55, bài 54, bài 53 bạn đã cơ bản lập trình được với Google Map. Trong bài này Tui sẽ […]

  3. Cho em hỏi, em coding giống thầy, nhưng error ngay chỗ

    error message “error: Error: No resource found that matches the given name (at ‘value’ with value ‘@integer/
    google_play_services_version’).”
    fix sao ạ

    1. Hi Bạn, bạn phải để project của bạn và thư viện tham chiếu tới cùng 1 ổ đĩa.

  4. thưa thầy em muốn đưa map vào 1 layout tạo khác thì làm tnao ạ….

  5. em sửa hết trong Android Manifest rồi mà k hiểu sao không chạy dc thầy ơi!..

  6. sao em viết lệnh vào cmd mà toàn báo not tool ạ.. ?? e cảm ơn

    1. Em dùng tool có sẵn của Eclipse như đã hướng dẫn cho tiện.

  7. Làm sao dùng Android Studio mở được project trên hả thầy. Một số project bằng eclipse mở được còn một số thì không. Với project trên khi mở lên thì được nhưng build thì error. Tôi đã import google_play_services_lib vào rồi nhưng không được. Thầy có thế hướng dẫn các bước được không?

    Thanks.

  8. google_play_services_lib tải ở đâu vậy ak.sao e tìm không được ak.khó quá th ak

  9. thầy ơi e muốn tìm đường giữa 2 địa điểm thì làm thế nào hả thầy? (không phải đường chim bay)

    1. Để tìm đường đi giữa 2 địa điểm bất kỳ em làm theo cách sau:
      1) hướng dẫn theo đi bộ:
      http://maps.googleapis.com/maps/api/directions/xml?origin=10.772017,106.693007&destination=10.785499,106.641909&sensor=false&units=metric&mode=walking
      2) hướng dẫn theo đi xe:
      http://maps.googleapis.com/maps/api/directions/xml?origin=10.772017,106.693007&destination=10.785499,106.641909&sensor=false&units=metric&mode=driving

      với origin =10.772017,106.693007 là vĩ độ và kinh độ của A.
      destination=10.785499,106.641909 là vĩ độ và kinh độ của B

      Có thể áp dụng tìm đường đi tại vị trí hiện tại tới một vị trí bất kỳ.

      ==> Google sẽ trả về danh sách XML (ta có thể đưa về JSON)==> dựa vào đây để hiện thị đường đi (vẽ lên Map)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s