Hướng dẫn tích hợp google map vào ứng dụng android

Như chúng ta đã biết về google map được sử dụng rộng rải trong các ứng dụng như tìm đường đi, tìm vị trí, hiển thị vị trí, …Trong bài viết hướng dẫn tích hợp google map vào ứng dụng android sẽ hướng dẫn các bạn các thao tác để tích hợp google map vào ứng dụng android của mình.

Hướng dẫn tích hợp google map vào ứng dụng android – Download Google Play services

Trước khi chúng ta bắt đầu tích hợp google map, chúng ta cần download Google Play services từ SDK manager. Bạn có thể mở SDK manager từ Android Studio bằng cách chọn Tools -> Android -> SDK Manager -> Launch Standalone SDK Manager

huong-dan-tich-hop-google-map-vao-ung-dung-android-1

Tiếp theo chúng ta phải tạo SHA1 key cho việc đăng ký ứng dụng với Google’s Developer Console.

Đối với hệ điều hành Windows (Run -> CMD -> Nhấn Enter)

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Lưu ý nếu bạn không tìm thấy keytool, nó nằm trong thư mục bin của thư mục JDK. Bên dưới là kết quả sau khi thực thi lệnh keytool

huong-dan-tich-hop-google-map-vao-ung-dung-android-2

Đối với hệ điều hành Linux hoặc Mac OS

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

Sau khi chúng ta đã tạo SHA1 key, bước tiếp theo là đăng ký API key cho ứng dụng. Đăng ký tại Google APIs Console. Để có thể đăng ký API, bạn phải sử dụng tài khoản gmail và đăng nhập vào Google API Console. Sau khi đăng nhập thành công, chọn “CREATE PROJECT

huong-dan-tich-hop-google-map-vao-ung-dung-android-3

Nhập tên project là google map -> chọn “Create

huong-dan-tich-hop-google-map-vao-ung-dung-android-4

Kích hoạt “Google Maps Android API”: chọn Google Maps Android API

huong-dan-tich-hop-google-map-vao-ung-dung-android-5

Chọn “ENABLE

huong-dan-tich-hop-google-map-vao-ung-dung-android-6

Chọn “Go to Credentials

huong-dan-tich-hop-google-map-vao-ung-dung-android-7

Tại màn hình “Credentials” chọn API key

huong-dan-tich-hop-google-map-vao-ung-dung-android-8

Tại màn hình “API key“, chọn “Android apps” và click “Add package name and fingerprint

huong-dan-tich-hop-google-map-vao-ung-dung-android-9

Nhập package name, SHA1 key và chọn “Create

huong-dan-tich-hop-google-map-vao-ung-dung-android-10

Sau khi click “Create“, API key sẽ được tạo và chúng ta sẽ sử dụng key này trong ứng dụng Android.

Hướng dẫn tích hợp google map vào ứng dụng android – Tạo mới project

1. Mở Android Studio, chọn File -> New -> New Project

2. Mở Gradle Scripts/build.gradle (Module:app) và thêm đoạn code sau vào trong dependencies, sau đó chọn “Sync Now

compile 'com.google.android.gms:play-services-maps:9.6.1'

3. Mở app/manifests/AndroidManifest.xml và thêm các đoạn code sau

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

huong-dan-tich-hop-google-map-vao-ung-dung-android-14

Nhập đoạn code sau trước thẻ đóng </application>

<meta-data
 android:name="com.google.android.maps.v2.API_KEY"
 android:value="Nhập API key mà bạn đã tạo trước đó" />

4. Mở app/res/layout/activity_main.xml và thêm một fragment trước thẻ đóng </RelativeLayout>

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

5. Mở app/java/advanced.android/MainActivity.java cài đặt interface OnMapReadyCallback, tham chiếu SupportMapFragment, thiết lập LatLng là TP.HCM và CameraPosition. Bên dưới là full code của MainActivity.java

package advanced.android;

import android.Manifest;
import android.content.pm.PackageManager;
import android.location.Location;
import android.support.v4.app.ActivityCompat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends AppCompatActivity implements OnMapReadyCallback {

    private GoogleMap gm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        createMap();
    }

    /**
     * function to load map. If map is not created it will create it for you
     * */
    private void createMap() {
        SupportMapFragment smf = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        smf.getMapAsync(this);

    }

    @Override
    protected void onResume() {
        super.onResume();
        createMap();
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        LatLng hcm = new LatLng(10.762622, 106.660172);
        gm = googleMap;
        gm.addMarker(new MarkerOptions().position(hcm).title("Marker in HCM City"));
        CameraPosition cp = new CameraPosition.Builder().target(hcm).zoom(13).build();
        gm.animateCamera(CameraUpdateFactory.newCameraPosition(cp));
    }
}

6. Build và run ứng dụng, chúng ta sẽ nhìn thấy kết quả như hình bên dưới

huong-dan-tich-hop-google-map-vao-ung-dung-android-15

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

BQT – http://giasutinhoc.vn