openplanning

Hướng dẫn và ví dụ Google Maps Android API

  1. Đăng ký Google Map API
  2. Ví dụ với Google Map

1. Đăng ký Google Map API

Ứng dụng của bạn có thành phần bản đồ, dữ liệu bản đồ nằm tại trung tâm dữ liệu của Google, vì vậy ứng dụng của bạn liên tục truy xuất dữ liệu bản đồ thông qua một dịch vụ.
Mặc dù dữ liệu bản đồ Google được cung cấp miễn phí tuy nhiên không phải việc truy xuất nó một cách tùy tiện, bạn cần có một API Key, nó giống như một giấy giới thiệu (Credentials) để truy cập dữ liệu bản đồ.
Bạn cần phải đăng ký một Google Map API Key, việc này hoàn toàn miễn phí. Bạn có thể xem tại:

2. Ví dụ với Google Map

Android Studio hỗ trợ bạn tạo một project với Google Map một cách dễ dàng và nhanh chóng:
Tuy nhiên ở đây tôi sẽ tạo một project từ đầu sau đó kéo thả đối tượng Google Map vào màn hình, có lẽ điều đó là tốt hơn nếu bạn muốn hiểu biết cặn kẽ các vấn đề. OK, trên Android Studio tạo mới một project có tên MyGoogleMap.
  • Name: MyGoogleMap
  • Package name: org.o7planning.mygooglemap
Một project rỗng đã được tạo ra:
<!-- Add to AndroidManifest.xml -->

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
Google Map API Key
GoogleMap trên Android sẽ sử dụng một dịch vụ để lấy dữ liệu bản đồ từ Google và hiển thị chúng. Ở phần trên bạn đã đăng ký một Google Map API Key, bạn cần phải khai báo Key này trong AndroidManifest.xml.
<meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="YOUR_API_KEY"/>
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.o7planning.mygooglemap">


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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

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

        
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Tiếp theo, bạn cần thêm thư viện Google Map vào project của bạn. Trên Android Studio chọn:
  • File > Project Structure..
Tìm kiếm thư viện với từ khóa "com.google.android.gms".
  • com.google.android.gms:play-services-maps
Lúc này, thư viện đã được thêm vào build.gradle(Module app).
implementation 'com.google.android.gms:play-services-maps:17.0.0'
Sau khi khai báo thư viện phụ thuộc, bạn cần phải biên dịch lại toàn bộ project.
Map Fragment
MapFragment & SupportMapFragment là 2 fragment được cung cấp bởi thư viện, chúng có chứa GoogleMap, bạn có thể sử dụng một trong 2 fragment này, hoặc viết một lớp thừa kế từ một trong hai lớp đó.
MyMapFragment.java
package org.o7planning.mygooglemap;

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

public class MyMapFragment extends SupportMapFragment implements OnMapReadyCallback {

    private GoogleMap googleMap;

    public MyMapFragment()  {
        getMapAsync(this);
    }

    @Override
    public void onMapReady(final GoogleMap gmap) {
        this.googleMap = gmap;

        // Set default position
        // Add a marker in Sydney and move the camera
        LatLng vietnam = new LatLng(14.0583, 108.2772); // 14.0583° N, 108.2772° E
        this.googleMap.addMarker(new MarkerOptions().position(vietnam).title("Marker in Vietnam"));
        this.googleMap.moveCamera(CameraUpdateFactory.newLatLng(vietnam));

        this.googleMap.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
            @Override
            public void onMapClick(LatLng latLng) {
                MarkerOptions markerOptions = new MarkerOptions();
                markerOptions.position(latLng);
                markerOptions.title(latLng.latitude + " : "+ latLng.longitude);
                // Clear previously click position.
                googleMap.clear();
                // Zoom the Marker
                googleMap.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 10));
                // Add Marker on Map
                googleMap.addMarker(markerOptions);
            }
        });
    }
}
Thiết kế giao diện của ứng dụng:
  • activity_main.xml
Sét đặt ID cho các thành phần trên giao diện.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment_map"
        android:name="org.o7planning.mygooglemap.MyMapFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.mygooglemap;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import androidx.fragment.app.FragmentManager;

public class MainActivity extends AppCompatActivity    {

    private MyMapFragment myMapFragment;

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

        FragmentManager fragmentManager = this.getSupportFragmentManager();
        this.myMapFragment = (MyMapFragment) fragmentManager.findFragmentById(R.id.fragment_map);

    }

}
Bây giờ bạn có thể chạy ứng dụng:

Các hướng dẫn lập trình Android

Show More