Tích hợp Google Map vào ứng dụng Android

498

Người viết: Code lam gi

Nếu ứng dụng của bạn có các tính năng liên quan tới địa điểm, nhà hàng, khách sạn… thì việc hiển thị bản đồ là 1 điều tất yếu. Bài viết sẽ hướng dẫn bạn cách tích hợp Google Map vào ứng dụng của bạn 1 cách cơ bản nhất.

  • Chuẩn bị
  • Hướng dẫn này sử dụng Android Studio phiên bản beta 2.0 mới nhất, nếu bạn dùng bản ổn định 1.5 giao diện có thể hơi khác 1 chút.
  • Mở SDK manager và cài thêm gói Google Play Services:

alt

Tạo 1 project Android mới, hoặc trong project hiện tại tạo 1 activity mới bằng trình tạo Activity của Studio.

alt

  Xây dựng hệ thống kiểm soát nhận dạng khuôn mặt với OpenCV Dlib và Deep Learning
  Nhận diện khuôn mặt trong ứng dụng Laravel sử dụng Google Cloud Vision API
  1. Chọn tạo mới 1 Google Map Activity. Bước sau có thể để tên mặc định và nhấn Finish.
  • Studio sẽ khởi chạy Gradle và build ứng dụng của bạn. Khi hoàn thành, Studio sẽ mở ra 2 file là google_maps_api.xml và MapsActivity.java (Tên có thể khác tùy vào cách bạn đặt). Trong file google_maps_api.xml có các thông tin để có thể lấy Google Maps API key.

alt

Bây giờ sẽ là cách để lấy được API key. Bạn có thể để ý phần ghi chú trong file google_maps_api.xml:

Lấy Certificate từ KeyTool

  • Bạn cần lấy một Certificate Key bởi vì bạn phải cung cấp nó cho Google Console để lấy API key cho Map.
  • Mở dòng nhắc lệnh và di chuyển tới path bạn đặt jre. Bây giờ gõ lệnh sau:

  • Copy đường link ở dòng thứ 3 và dán vào trình duyệt, bạn sẽ được đưa tới trang Google Developers Console để tạo project API cho ứng dụng của bạn

alt

Nhấn vào Continue

alt

alt

  • Đổi tên API key nếu muốn và nhấn Create

alt

  • Đây là key API của bạn, copy lại và dán vào dòng YOUR_KEY_HERE như thế này:

  • Vậy là xong, hãy chạy thử project của bạn. Nó sẽ hiện ra 1 bản đồ được đánh 1 dấu đỏ ở Sydney, Úc.

alt

  • Như vậy ta đã lấy được API key đồng thời tạo 1 Activity mới sử dụng duy nhất 1 Fragment hiển thị bản đồ. Dưới đây sẽ là cách thêm 1 bản đồ vào 1 activity có sẵn đầy đủ hơn sau khi sở hữu API key.

Thêm Google Map vào Activity có sẵn

  • Bạn có thể tham khảo code của MapsActivity để có thể tự thêm vào các Activity khác 1 cách dễ dàng:
  • Trong layout của activity thêm vào 1 fragment như sau:

  • Thêm 1 đối tượng GoogleMap vào activity:

  • Trong phần onCreate() thêm đoạn code để khởi tạo map:

  • Cho activity của bạn implements interface OnMapReadyCallback:

1 số tương tác thường dùng trên GoogleMap

Sau đây là 1 số tương tác hay gặp nhất với GoogleMap

Đổi kiểu map

  • Có 1 số kiểu map được cung cấp sẵn: bình thường, Hybrid, vệ tinh, địa hình, và kiểu trống. Hãy thay tham số trong hàm setMapType() bằng các hằng số MAP_TYPE_… trong class GoogleMap để thử nghiệm. Dưới đây là hình map thường, Hybrid và địa hình:

alt

Thao tác với camera

Hàm trên yêu cầu truyền vào 1 đối tượng CameraUpdate giúp thay đổi vị trí hiển thị trên map, zoom to nhỏ… Ta sẽ tạo đối tượng này bằng class CameraUpdateFactory. Sau đây là 1 số thao tác:

CameraUpdateFactory.zoomIn() và CameraUpdateFactory.zoomOut(): zoom to/nhỏ 1 đơn vị

CameraUpdateFactory.zoomTo(float): zoom theo tham số truyền vào, có thể âm

CameraUpdateFactory.newLatLng(LatLng): di chuyển tới vị trí theo tham số LatLng truyền vào. Ví dụ có thể thấy ở ngay phần tạo map:

CameraUpdateFactory.newLatLngZoom(LatLng, float): vừa di chuyển vừa zoom luôn.

Stt Phương thức & Miêu tả
1 **addCircle(CircleOptions options)**Phương thức này thêm một vòng tròn vào Map
2 addPolygon(PolygonOptions options) Phương thức này thêm một hình đa giác vào Map
3 addTileOverlay(TileOverlayOptions options) Phương thức này thêm Tile Overlay tới Map
4 animateCamera(CameraUpdate update) Phương thức này di chuyển Map theo update với một Animation
5 clear() Phương thức này gỡ bỏ mọi thứ từ Map
6 getMyLocation() Phương thức này trả về vị trí người dùng được hiển thị hiện tại
7 moveCamera(CameraUpdate update) Phương thức này tái định vị Camera tương ứng với chỉ thị được định nghĩa trong update
8 setTrafficEnabled(boolean enabled) Phương thức này toggle tầng truyền tải là on hoặc off
9 snapshot(GoogleMap.SnapshotReadyCallback callback) Phương thức này nhận một snapshot của Map
10 stopAnimation() Phương thức này dừng Camera Animation nếu có một hiệu ứng đang tiến hành

Đánh dấu – Marker

  • Tạo 1 marker đơn giản như sau:

  • Hàm **addMarker() **trả về 1 đối tượng Marker, có thể lưu lại để tái sử dụng về sau.
  • Hàm tạo marker có thể thêm nhiều tùy biến, sau đây là 1 vài tùy biến hay dùng:
  • Thay màu sắc:

  • Thay icon: thay bằng icon có resourceId là R.drawable.arrow

  • Tạo 1 bảng tin nhỏ khi ấn vào marker: tiêu đề là Melbourne và nội dung Population: 4,137,400

  • Bài viết đã cung cấp tổng quan cho các bạn cách tích hợp Google Map vào ứng dụng Android. Bên cạnh đó còn rất nhiều tùy chọn khác nữa, tham khảo đường dẫn này để tìm hiểu thêm về cách sử dụng Google Map.

Có thể bạn quan tâm:

Xem thêm việc làm Android Developer trên TopDev

TopDev via viblo

  Xây dựng giao diện Android với FlexBox
  Cơ bản về Android App Bundle
SHARE