Google maps android API

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.comapisconsole).GMAA Key được liên kết thông qua Digital Cerfiticate (DCChứ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ã SHA1 (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.

Google Maps Android API

Bài 1: Google Maps Android API

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

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

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

Khai báo version sử dụng:

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:

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:

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:

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

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

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

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)

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

Ta tùy chỉnh Marker bằng cách các thông số:

Để tùy chỉnh InfoWindow trong lớp GoogleMap hỗ trợ giao diện

InfoWindowAdapter bao gồm 2 phương thức:

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:

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

Bài 2: Google Maps Android API

Ở bài tập 1 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ạ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:

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

android:name="com.google.android.maps.v2.API_KEY"

android:value="AIzaSyAs7FEF1RxuoSat_oHITBirDKagx2nQKDM"/> <activity

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/LearnGo ogleMap.rar

Bài 3: Google Maps Android API

Bài 1 , 2 bạn đã biết cách đưa Google Map ra ứng dụng Android Trong bài này Tui

sẽ hướng dẫn các bạn cách tương tác nâng cao với Google Map.

Ta tiếp tục với Project LearnGoogleMap ở bài 54

Để truy xuất đối tượng Google Map trong XML layout ta làm như sau:

Thông thường khi tải Google Map thường tốn thời gian chờ, vì vậy ta nên dùng

Progress control để cho người sử dụng biết là chương trình đang chạy.

GoogleMap cung cấp sự kiện OnMapLoadedCallback để cho phép ta kiểm tra xem

Map đã được tải về ứng dụng hoàn thành hay chưa, ta có thể dựa vào sự kiện này để

//Khai báo đối tượng Google Map

//Tạo Progress Bar

myProgress.setTitle("Đang tải Map ");

//Đã tải thành công thì tắt Dialog Progress đi

Khởi động ứng dụng ta được như sau:

– Ta cần biết thêm số chức năng của Google Map như sau:

+ Làm sao biết biết được vị trí hiện tại của ta để di chuyển Map đúng vị trí + Cách xoay , quay Map như thế nào

+ Đường đi giữa các địa điểm ra sao….

* Để biết được vị trí hiện tại của ta trên bản đồ ta cần bổ sung thêm Manifest các thông số sau:

LocationManager locationManager = (LocationManager)

getSystemService(LOCATION_SERVICE);

Location lastLocation =

locationManager.getLastKnownLocation(locationManager.getBestProvider(criteria, false));

{

map.animateCamera(CameraUpdateFactory.newLatLngZoom(

lastLocation.getLongitude())) // Sets the center of the map to

location user

.zoom(15) // Sets the zoom

.bearing(90) // Sets the orientation of the camera to east.tilt(40) // Sets the tilt of the camera to 30 degrees.build(); // Creates a CameraPosition from the buildermap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));}

6

TuiDangODau();

}

Khi chạy ứng dụng lên, phần mềm sẽ tự động đưa ta về đúng vị trí trên bản đồ …:

Bạn muốn thêm ghi chú cho địa điểm của bạn thì bổ sung tiếp MarkerOptions, bạn sửa lại hàm TuiDangODau như sau:

LocationManager locationManager = (LocationManager)

getSystemService(LOCATION_SERVICE);

Location lastLocation =

locationManager.getLastKnownLocation(locationManager.getBestProvider(criteria, false));

{

.target(latLng) // Sets the center of the map to location user

.zoom(15) // Sets the zoom

.bearing(90) // Sets the orientation of the camera to east.tilt(40) // Sets the tilt of the camera to 30 degrees.build(); // Creates a CameraPosition from the buildermap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));//Thêm MarketOption cho Map:

option.title("Chỗ Tui đang ngồi đó");

-Tuy nhiên trong nhiều trường hợp ta cần hiệu chỉnh lại MarkerOption theo ý của Ta cho nó đẹp và phục vụ những

mục đích khác… Do đó ta cần phải biết hiệu chỉnh InfoWindowAdapter:

Giả sử ta sửa lại Marker Option như sau:

Bạn quan sát khi Tui nhấn ngón tay vào núm màu xám xanh thì nó hiển thị lên MarkerOption theo định dạng của riêng Tui, cái này rất hay và tiện dung trong việc quảng bá thương hiệu của một địa điểm nào đó, với những thông tin thật chi tiết và hữu ích.

Bạn để ý Marker Tui hiển thị các thông tin sau:

– Hình Tui tải từ link trên Facebook

Tiếp tục với bài LearnGoogleMap ở trên, bạn tạo thêm lớp ImageLoadTask để tải hình từ Facebook, MyInfoWindowAdapter và custom_info.xml để hiển thị thông tin Marker theo ý mình:

– Layout để hiển thị Marker Option

theo ý mình như sau (custom_info.xml):

//Tiến hành tạo đối tượng URL

InputStream input = connection.getInputStream();

//Tiến hành convert qua hình ảnh

Bitmap myBitmap = BitmapFactory.decodeStream(input);

– Chú ý dòng lệnh 67, 69 là để gán Custom cho Map và hiển thị nó lên.

Coding MyInfoWindowAdapter để custom layout cho Marker option:

// Getting view from the layout file info_window_layout

View v = this.context.getLayoutInflater().inflate(R.layout.custom_info, null);

// Getting the position from the marker

LatLng latLng = arg0.getPosition();

// Getting reference to the TextView to set latitude

TextView tvLat = (TextView) v.findViewById(R.id.tv_lat);

// Getting reference to the TextView to set longitude

TextView tvLng = (TextView) v.findViewById(R.id.tv_lng);

TextView tvTitle = (TextView) v.findViewById(R.id.tv_title);

TextView tvSnippet = (TextView) v.findViewById(R.id.tv_snippet);

ImageView imgdrthanh=(ImageView) v.findViewById(R.id.img_drthanh);

// Setting the latitude

tvLat.setText("Latitude:"+ latLng.latitude);

// Setting the longitude

tvLng.setText("Longitude:"+ latLng.longitude);

//Khai báo đối tượng Google Map

//Tạo Progress Bar

myProgress.setTitle("Đang tải Map ");

myProgress.setMessage("Vui lòng chờ ");

//Đã tải thành công thì tắt Dialog Progress đi

LocationManager locationManager = (LocationManager)

.target(latLng) // Sets the center of the map to location user

.zoom(15) // Sets the zoom

.bearing(90) // Sets the orientation of the camera to east.tilt(40) // Sets the tilt of the camera to 30 degrees.build(); // Creates a CameraPosition from the buildermap.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));//Thêm MarketOption cho Map:

option.title("Chỗ Tui đang ngồi đó");

option.snippet("Gần làng SOS");

option.position(latLng);

option.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_VIOLET));

Marker currentMarker= map.addMarker(option);

4 6 4 7 4 8 4 9 5 0 5 1 5 2 5 3 5 4 5 5 5 6 5 7 5 8 5 9 6 0 6 1 6 2 6 3 6 4 6 5 6 6 6 7 6 8 6 9 7 0 7 1

Bạn có thể tải source code phần Custom Marker Option ở đây:

http://www.mediafire.com/download/cha8toku8386wet/LearnGoogleMap_custom_ marker_option.rar

Như vậy bạn đã biết được thao tác nâng cao với Google Map control, bài tiếp theo Tui sẽ hướng dẫn các bạn cách sử dụng các Autoshape trên Map (line, polyline, Rectangle, circle…)

Bạn cần phải làm lại bài này nhiều lần để hiểu được cơ chế làm việc của nó, đặc biệt

là cách Custom Layout cho marker Option.

Bài 4: Google Maps Android API

Tiếp tục bài 3 , bài 2 , bài 1 bạn đã cơ bản lập trình được với Google Map Trong bài này Tui sẽ hướng dẫn các bạn cách dùng các đối tượng Shape để tương tác với Google Map, chẳng hạn như:

ArrayAdapter<String> adapterMap=newArrayAdapter<>

(this, android.R.layout.simple_spinner_item, arrMap);

adapterMap.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

spinner_maps_type.setAdapter(adapterMap);

@Override

Khi chạy ứng dụng lên ta sẽ có các kết quả sau:

– Tiến hành vẽ các đối tượng Shape lên Google Map: Tui sẽ hướng dẫn cách vẽ Polyline, Polygons, Circle trên Map, dưới đây là một số hình minh họa:

*polyline:

– Để vẽ và đường polyline (những đường thẳng liên tục những không khép kín)

Ta khai báo đối tượng PolylineOptions :

PolylineOptions plOption=new PolylineOptions();

Sau đó đưa tất cả các tọa độ vào PolylineOptions rồi đẩy vào hàm :

P olyline polyline= map.addPolyline(plOption);

Hàm addPolyline sẽ trả về 1 Polyline, ta có thể hiệu chỉnh đối tượng này như sau: – Thiết lập màu đường kẻ: polyline.setColor(Color.RED);

– Thiết lập độ dày đường kẻ: polyline.setWidth(5)

– Thiết lập độ chồng lấp: polyline.setZIndex(1);

*Polygon:

Vẽ các đường line liên tục và khép kín

Tương tự ta tạo đối tượng : PolygonOptions

PolygonOptions pgOption=new PolygonOptions();

Đẩy tất cả tọa độ vào PolygonOptions sau đó đưa vào hàm:

Polygon polyGon= map.addPolygon(pgOption);

Hàm addPolygon trả về một đối tượng Polygon , ta có thể hiệu chỉnh:

– Thiết lập màu đường viền: polyGon.setStrokeColor(Color.BLUE);

– Thiết lập màu nền: polyGon.setFillColor(Color.YELLOW);

– Thiết lập độ dày: polyGon.setStrokeWidth(5);

*Circle: