Bài 53: Google Maps Android API – phần 1

Tui nhớ không lầm cách đây khoảng 7 hoặc n năm trở về trước, khi đi ra đường nếu không muốn bị lạc đường thì chỉ cần hỏi các bác xe ôm là có thể tìm được địa điểm như mong muốn. Tuy nhiên không phải lúc nào ta cũng có thể gặp được những bác xe ôm tốt bụng thật tình chỉ đường, Tui cũng là một nạn nhân khi lần đầu tiên đi phỏng vấn ở công ty năm trong Khu Dân Cư Gia Hòa, lúc Thầy của Tui giới thiệu vào phỏng vấn và có nói là quốc lộ 51 (Tui nhớ rõ là quốc lộ 51) hướng đi Nam Sài Gòn… Thế là tui phang 1 mạch đi lung tung từ Gò Vấp qua cầu Nguyễn Tất Thành, vòng thẳng Nguyễn Văn Linh…. đi gặp quốc lộ 50… rồi hỏi Bác xe ôm trẻ tuổi ngay ngã 4… “Làm ơn cho Tui hỏi quốc lộ 51 ở đâu ạ”, và họ nói “Đây là 50 cứ chảy thẳng xuống là 51”.. Tui cảm ơn rối rít chạy thêm hơn nửa tiếng thì gần tới đường đi Long An…. hốt hoảng chạy ngược lại…. đúng ngã 4 Nguyễn Văn Linh và Quốc Lộ 50… hỏi lại người khác thì được giải thích Quốc lộ 51 là đường đi Vũng Tàu…. đi sai đường rồi…. Lúc đó Tui mới té ngửa ra và gọi lại cho Thầy Tui thì được nhắc lại là quốc lộ 50…

Bạn thấy đấy, nếu như sài điện thoại củ chuối chém đá như chém bùn thì làm gì có Máp với chả miếc mà tự tìm đường…. Hiện nay với sự phát triển của điện thoại thông minh Hoàng Phi Hồng với giá rẻ bèo bạn cũng có thể sở hữu được những điện thoại thông minh với những chức năng hết chỗ chê…. Google đã cung cấp chức năng Google Maps tích hợp vào điện thoại giúp người sử dụng có thể dễ dàng tìm đường đi.. Cho dù nó ở trong góc trong góc trong cùng cũng lòi ra được, đặc biệt hãng còn cho phép lập trình viên tùy biến Google Maps thông qua việc cung cấp các API cực đỉnh giúp chúng ta thỏa chí lập trình…. và đặc biệt sẽ không bị ai đó nói dối về đường đi, giúp ta tiết kiệm thời gian và tiền bạc.

Ngày xưa ông bà ta thường có câu ngạn ngữ “Ra đường hỏi người già, về nhà hỏi trẻ nhỏ”, nhưng từ khi có Google Map thì Tui nghĩ nên đổi lại “Ra đường hỏi Google Map, về nhà hỏi cô hàng xóm”.

Hiện nay có rất nhiều website đã hướng dẫn các bạn cách lập trình với Google Map, bạn chỉ cần lên google enter 1 phát là nó ra 1 nùi…. nhưng không phải nùi nào cũng dễ hiểu.

Trong các bài tập tiếp theo đây Tui sẽ hướng dẫn các bạn từng bước tiếp cập với Google Map thông qua các bài tập mẫu từ dễ lên khó, với mong muốn giúp các bạn có thể tự lập trình cũng như cải tiến theo cách của mình và áp dụng một cách hiệu quả nhất vào ứng dụng của mình.

—————————————————————————–

1) Cách Thiết lập Google Map trong ứng dụng Android:

Google Maps Android API (GMAA) bao gồm các dữ liệu bản đồ được phát triển bởi Google Inc cho phép lập trình viên tích hợp vào các ứng dụng thông qua các phương thức được cung cấp sẵn.

GMAA hỗ trợ các thao tác với giao diện đồ họa của bản đồ bao gồm:

• Vẽ biểu tượng trên bản đồ (Marker).
• Đồ họa đường thẳng (Polylines).
• Đồ họa hình đa giác (Polygons).
• Bitmap trên bản đồ (Ground & Tile Overlay).

Google Maps Android API Key: chuỗi mã hóa được Google cung cấp miễn phí để quản lý và chứng thực việc truy xuất dữ liệu bản đồ trên ứng dụng (được lấy trên https://code.google.com/apis/console).

GMAA Key được liên kết thông qua Digital Cerfiticate (DC-Chứng thư số) và Pakage Name (Tên đóng gói) của ứng dụng.

Tạo GMAA Key bao gồm 3 bước chính như sau:

• Bước 1: Truy xuất thông tin DC bằng mã SHA-1 (dùng command line hoặc từ eclipse).
• Bước 2: Đăng ký Project trong Google API Console.
• Bước 3: Tích hợp Google Map Service vào Project và gửi yêu cầu cấp GGMA Key.

Trong mọi ứng dụng liên quan tới Google Map thì cần Cấu hình tập tin AndroidManifest về một số thứ như:

Khai báo một số quyền truy cập phần cứng và sử dụng dữ liệu người dùng.
Việc xác định quyền sử dụng dữ liệu bản đồ thông qua GMAA KEY. KEY này được khai báo trong tag meta-data nằm trong tag application:

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

Với API_KEY là được lấy từ Google Developers

Khai báo version sử dụng:

 <meta-data
            android:name="com.google.android.gms.version"
            android:value="@integer/google_play_services_version" />

Một số quyền cần thiết lập trong Manifest như sau:

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

Cần cung cấp OpenGL 2.0 cho việc đồ họa bản đồ:

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

Cuối cùng ta có một Manifest tương tự như sau:

<?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="AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM" />

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

Ở trên bạn thấy API_KEY =AIzaSyAWPt-7pVRw-HUBoy9J8_YtB6qPDpp94lM

Chi tiết lấy API_KEY sẽ được hướng dẫn ở bài sau.

2) tương tác các đối tượng GoogleMap:

Tạo các đối tượng để thực hiện tương tác giữa ứng dụng với người dùng bao gồm:

GoogleMap:

• Kết nối đến Google Map Service.
• Tải dữ liệu bản đồ theo từng mảng nhỏ (tiles).
• Thể hiện dữ liệu bản đồ trên màn hình thiết bị.
• Thể hiện các điều khiển giao tiếp như thu phóng, la bàn…
• Xử lý các tương tác thu phóng, xoay, góc nhìn…

MapFragment: xây dựng giao diện bản đồ bằng cách xây dựng Fragment.

MapView: xây dựng giao diện bản đồ như một điều khiển và tương tác với Activity.

Truy xuất và sử dụng đối tượng GoogleMap từ thẻ fragment trong XML:

GoogleMap map = ((MapFragment)getFragmentManager().findFragmentById(R.id.map)).getMap();

map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
map.getUiSettings().setZoomControlsEnabled(true);
map.setMyLocationEnabled(true);

Hoặc:

MapFragment mapFragment = MapFragment.newInstance();
GoogleMap mMap = mapFragment.getMap();
mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
getFragmentManager().beginTransaction().add(R.id.container,mapFragment).commit();</pre>

Các kiểu giao diện hiển thị bản đồ mà Google Map cung cấp:

• MAP_TYPE_NORMAL
• MAP_TYPE_HYBRID
• MAP_TYPE_NONE
• MAP_TYPE_SATELLITE
• MAP_TYPE_TERRAIN

Các kiểu này ta có thể dùng coding để thay đổi kiểu hiển thị thông qua hàm : setMapType(int)

Một số hình minh họa cách hiển thị:

Ta có thể thiết lập các giá trị ban đầu và điều khiển cho GoogleMap bao gồm:

• Góc nhìn (Camera)
• Thu phóng (zoom)
• Chuyển điểm (location)
• Xoay (bearing)
• Góc nghiêng (titl)
• La bàn và điều khiển thu phóng.
• Các điều khiển cử chỉ trên bản đồ.

Ta thiết lập các giá trị ban đầu và điều khiển cho GoogleMap trong layout 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>

Bạn để ý : class=”com.google.android.gms.maps.MapFragment”

Bạn có thể lấy fragment là root.

Ta cũng có thể thiết lập như sau:

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
class="com.google.android.gms.maps.SupportMapFragment"
>

</fragment>

Bạn để ý :  class=”com.google.android.gms.maps.SupportMapFragment”

Ta có thể thực hiện tùy chỉnh GoogleMap thông qua đối tượng GoogleMapOptions:

MapFragment.newInstance(GoogleMapOptions)

MapView(Context, GoogleMapOptions)

3) Thiết lập Đồ họa trên Google Map:

-Lớp Marker:

Lớp này được xây dựng sẵn cho việc sử dụng định vị tọa độ trên bản đồ, hiển thị  thông tin địa điểm và tương tác với người dùng:

Ví dụ dưới đây Tui lấy Kinh độ và vĩ độ của Trung Tâm Tin Học ĐH Khoa Học tự nhiên (cơ sở 357 Lê Hồng Phong)

LatLng TTTH_KHTN = new LatLng(10.763181, 106.675664);
MarkerOptions option=new MarkerOptions();
option.position(TTTH_KHTN);
option.title("Trung tâm tin học ĐH KHTN").snippet("This is cool");
option.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_AZURE));
option.alpha(0.8f);
option.rotation(90);
Marker maker = map.addMarker(option);
maker.showInfoWindow();
map.moveCamera(CameraUpdateFactory.newLatLngZoom(TTTH_KHTN, 15));

Nếu bạn thắc mắc làm sao lấy được kinh độ vĩ độ đúng như vậy thì có thể vào google Maps, tìm đúng địa điểm và nhấn chuột phải vào địa điểm đó/ chọn What is here: Ta tùy chỉnh Marker bằng cách các thông số:

• Position
• Title
• Snippet
• Draggable
• Visible
• Anchor
• Icon

InfoWindow: được thể hiện phía trên đối tượng Marker  thể hiện các thông tin cần thiết về vị trí đang định vị.

Chỉ một đối tượng InfoWindow hiển thị ở một thời điểm và có thể điều khiển thông qua hai phương thức:

showInfoWindow()

hideInfoWindow()

Để tùy chỉnh InfoWindow trong lớp GoogleMap hỗ trợ giao diện InfoWindowAdapter bao gồm 2 phương thức:

getInfoWindow(Marker)

getInfoContents(Marker)

Ta gọi phương thức  setInfoWindowAdapter  để thiết lập InfoWindow cho đối tượng GoogleMap

Hình ví dụ mẫu:

Ngoài ra Google Maps API cung cấp các giao diện cho phép bắt lại các sự kiện tương với Marker và InfoWindow:

• OnMarkerClickListener
• OnMarkerDragListener
• OnInfoWindowClickListener

Ta cũng cần chú ý vì load Map có thể mất nhiều thời gian nên cần có ProgressBar để hiển thị cho người sử dụng không phải thắc mắc, thường ta dùng ProgressDialog để hiển thị trong thời gian chờ chương trình hoàn tất load Map. Ta có thể xử lý được việc hoàn tất load Map qua sự kiện sau:

map.setOnMapLoadedCallback(new OnMapLoadedCallback() {

@Override
public void onMapLoaded() {
// TODO Auto-generated method stub
//Xử lý ở đây nầy
Log.i("MAP LOADED", "END");
}
});

Như vậy Tui đã giới thiệu xong Google Maps Android API, các bạn có thể tham khảo thêm tại link https://developers.google.com/maps/documentation/android/

Bài tập kế tiếp Tui sẽ hướng dẫn từng bước tạo 1 Project sử dụng Google Map như thế nào

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

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