Google Map trong Android



Android cho phép chúng ta tích hợp Google Map trong ứng dụng. Bạn có thể hiển thị bất cứ vị trí nào trên Map, hoặc có thể hiển thị các tuyến khác nhau trên Map, … Bạn cũng có thể tùy chỉnh Map tùy theo lựa chọn của mình.

Thêm Google Map

Google cung cấp phương tiện này bởi sử dụng Google Play Service Library mà bạn phải download từ bên ngoài. Sau khi tải về, bạn phải tích hợp nó với project. Cuối cùng, bạn phải tích hợp ứng dụng với Google thông qua Google Console. Điều này được giải thích trong ví dụ.

Google Map - Activity file

Google cung cấp GoogleMap và MapFragment API để tích hợp Mạp trong ứng dụng Android. Để sử dụng GoogleMap, bạn phải tạo một đối tượng của GoogleMap và lấy tham chiếu của Map từ xml layout file. Cú pháp như sau: −

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

Google Map - Layout file

Bây giờ bạn phải thêm map fragment vào trong xml layout file. Cú pháp là: −

<fragment
   android:id="@+id/map"
   android:name="com.google.android.gms.maps.MapFragment"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

Google Map - AndroidManifest file

Tiếp theo bạn cần thêm một số permission cùng với Google Map API key trong AndroidManifest.XML file. Cú pháp như sau: −

<!--Permissions-->

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

<!--Google MAP API key-->

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

Tùy chỉnh Google Map

Bạn có thể dễ dàng tùy chỉnh Google Map từ View mặc định của nó, và thay đổi nó theo yêu cầu của bạn.

Thêm Marker

Bạn có thể đặt một Marker với một vài text thông qua nó để hiển thị vị trí của bạn trên Map. Điều này có thể được thực hiện thông qua phương thức Cú pháp như sau: addMarker() Cú pháp như sau: −

final LatLng TutorialsPoint = new LatLng(21 , 57);
Marker TP = googleMap.addMarker(new MarkerOptions().position(TutorialsPoint).title("TutorialsPoint")); 

Thay đổi Map Type

Bạn cũng có thể thay đổi kiểu Map. Có 4 kiểu Map khác nhau và mỗi kiểu cung cấp view khác nhau về Map. Các kiểu này là Normal, Hybrid, Satellite, và Terrain. Bạn có thể sử dụng chúng như sau:

googleMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
googleMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
googleMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);

Kích hoạt/vô hiệu hóa Zoom

Bạn cũng có thể kích hoạt hoặc vô hiệu hóa Zoom Gesture trong Map bằng việc gọi phương thức Cú pháp như sau: setZoomControlsEnabled(boolean) Cú pháp như sau: −

googleMap.getUiSettings().setZoomGesturesEnabled(true);

Ngoài các tùy chỉnh này, lớp GoogleMap còn cung cấp một số phương thức khác giúp đỡ bạn tùy chỉnh Map. Đó là: −

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

Ví dụ

Ví dụ sau minh họa sự sử dụng của lớp GoogleMap. Bạn tạo một ứng dụng M cơ bản cho phép điều hướng thông qua Map.

Để thử nghiệm ví dụ, bạn có thể chạy trên một thiết bị thực sự hoặc một Emulator.

Tích hợp Google Map

Để tích hợp Google Map trong ứng dụng, bạn thực hiện theo 4 bước cơ bản sau:

  • Tải và cấu hình Google Play Service SDK

  • Thu nhận API key từ Google Console

  • Xác định các thiết lập Android Manifest

Tải và cấu hình Google Play Service SDK

Cài đặt Google Service SDK

Nhấn chuột phải vào ứng dụng, sau đó mở Project Structure và chọn Dependencies tab. Từ đó bạn thấy một biểu tượng "+" trong đó bạn chọn Library Dependencies. Bạn cần thêm Google Services trong cửa sổ đó.

Anroid Google Map

Nhập SDK tới Eclipse

Sau khi tải SDK, nhấn file tab và chọn tùy chọn Import. Chọn code ứng dụng android đang tồn tại và nhấn Ok. Trình duyệt tới android folder và sau đó là sdk folder. Trong sdk folder, mở extras folder. Mở google folder và chọn google play services.

Cấu hình Project với SDK

Sau khi nhập SDK, bạn phải thêm nó vào trong project của bạn. Để thực hiện, nhấn chuột phải trên project và chọn Properities. Chọn Android từ tab bên trái và sau đó chọn Add bên phải của panel dưới. Hình minh họa là:

Anroid Google Map

Thu nhận API key

Phần này có thể chia thành 2 bước. Đầu tiên bạn phải lấy một SHA1 fingerprint key từ PC của bạn và sau đó phải lấy Map API key từ Google Console.

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:

keytool -list -v -alias androiddebugkey -keystore %%Your path%% -storepass android -keypass android

Thay thế %%your path%% với path bạn sẽ sao chép từ việc chọn Window tab, chọn Preferences tab và chọn tùy chọn Build dưới Android từ bên trái.

Sao chép debug keystore path mặc định và thay thế nó trong dòng lệnh rồi nhấn Enter. Kết quả sau sẽ xuất hiện.

Anroid Google Map

Sao chép SHA1 key cho bước tiếp theo.

Lấy key từ Google Console

Mở Google Console và đăng nhập bằng cách nhấn vào một new project.

Chọn Services từ tab trái và sau đó điều hướng tới Google Máp Android API v2. Bạn phải bật như thế này.

Anroid Google Map

Bây giờ lại tới tab trái và chọn API Access, sau đó là Create new Android key. Bây giờ dán key bạn đã sao chép và đặt một dấu chấm phảy và dán tên project của bạn và nhấn Create. Như sau:

Anroid Google Map

Bây giờ sao chép API key đã được cung cấp cho bạn bởi Android, bởi vì bạn phải dán nó trong manifest file.

Xác định các thiết lập Android Manifest

Bước cuối cùng là thêm API key vào ứng dụng. Mở manifest file và đặt code này ngay trước khi đóng thẻ ứng dụng.

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

Trong dòng thứ hai thay thế API_KEY với api key của bạn. Bạn cần thêm một số permission vào manifest.

Thêm Google Máp vào ứng dụng

Sau đây là nội dung của main activity đã được sửa đổi:src/com.example.googlemaps/MainActivity.java.

package com.example.googlemaps;

import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

import android.os.Bundle;
import android.app.Activity;
import android.widget.Toast;

public class MainActivity extends Activity {
   static final LatLng TutorialsPoint = new LatLng(21 , 57);
   private GoogleMap googleMap;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      try {
         if (googleMap == null) {
            googleMap = ((MapFragment) getFragmentManager().
            findFragmentById(R.id.map)).getMap();
         }
         googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
         Marker TP = googleMap.addMarker(new MarkerOptions().
         position(TutorialsPoint).title("TutorialsPoint"));
      }
      catch (Exception e) {
         e.printStackTrace();
      }
   }
}

Bạn sửa đổi nội dung của res/layout/activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent" >

   <fragment
      android:id="@+id/map"
      android:name="com.google.android.gms.maps.MapFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"/>

</RelativeLayout>

Tiếp theo là nội dung của AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.googlemaps"
   android:versionCode="1"
   android:versionName="1.0" >

   <uses-permission android:name="com.example.googlemaps.permission.MAPS_RECEIVE" />

   <uses-sdk
      android:minSdkVersion="12"
      android:targetSdkVersion="17" />
   <permission
      android:name="com.example.googlemaps.permission.MAPS_RECEIVE"
      android:protectionLevel="signature" />


   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="com.google.android.providers.
      gsf.permission.
      READ_GSERVICES" />
   
   <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" />

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.googlemaps.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>
      
      <meta-data
         android:name="com.google.android.maps.v2.API_KEY"
         android:value="AIzaSyDKymeBXNeiFWY5jRUejv6zItpmr2MVyQ0" />

   </application>

</manifest>

Chạy ứng dụng GoogleMaps vừa tạo ở trên.

Anroid Google Map

Điều bạn cần làm là di chuyển chuột tới hình khinh khí cầu để xem text.

Anroid XML Google Map

Bây giờ bạn có thể tùy chỉnh Google Map theo tùy chọn của bạn với các hàm đã cung cấp bởi GoogleMap API.

Loạt bài hướng dẫn học AngularJS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.