Cách tạo mã bản đồ

Mã bản đồ là giá trị nhận dạng duy nhất đại diện cho chế độ tạo kiểu và chế độ cài đặt cấu hình của Google Maps được lưu trữ trong Google Cloud. Bạn sử dụng mã bản đồ để bật các tính năng hoặc quản lý hoặc tạo kiểu cho bản đồ trên trang web và trong ứng dụng của mình. Bạn có thể tạo mã bản đồ cho từng nền tảng mà bạn cần (JavaScript, Android, iOS hoặc Bản đồ tĩnh) trong dự án trên Google Cloud Console trên trang Quản lý bản đồ.

Để biết thêm thông tin chi tiết và các tính năng sử dụng mã bản đồ, hãy xem bài viết Tổng quan về mã bản đồ.

Các quyền bắt buộc

Để tạo hoặc quản lý bất kỳ mã bản đồ nào trong dự án của mình, bạn phải sử dụng một thực thể chính có các quyền thích hợp ở cấp vai trò (Người chỉnh sửa hoặc Chủ sở hữu) trên trang IAM của Cloud Console cho dự án. Để biết thông tin chi tiết, hãy xem Tài liệu tham khảo về các vai trò cơ bản và vai trò được xác định trước trong IAM.

Tạo mã bản đồ

Tạo mã bản đồ trong Cloud Console theo các bước sau:

  1. Đăng nhập và mở một dự án trên Cloud Console bằng các quyền bắt buộc.

  2. Trong Cloud Console, hãy chuyển đến trang Quản lý bản đồ.

  3. Nhấp vào Tạo mã bản đồ.

    Tạo mã bản đồ mới

  4. Trên trang Tạo mã bản đồ mới, hãy làm như sau:

    1. Đối với Tên, hãy đặt tên cho mã bản đồ.
    2. Không bắt buộc: Đối với Nội dung mô tả, hãy mô tả mục đích sử dụng của mã bản đồ.
    3. Đối với Loại bản đồ, hãy chọn nền tảng mà bạn dự định sử dụng mã bản đồ. Nếu bạn chọn JavaScript, hãy chọn loại bản đồ Raster (mặc định) hoặc Vector. Để biết thêm thông tin về bản đồ vectơ, hãy xem phần Bản đồ vectơ.
    4. Nhấp vào Lưu để hiển thị mã bản đồ mới.

Liên kết mã bản đồ với kiểu bản đồ

Nếu đang sử dụng tính năng định kiểu bản đồ dựa trên đám mây, bạn sẽ liên kết một kiểu bản đồ với mã bản đồ của mình. Để biết thông tin chi tiết, hãy xem phần Liên kết kiểu với mã bản đồ.

Thêm mã bản đồ vào ứng dụng

Android

Thêm mã nhận dạng bản đồ thông qua một phần tử <fragment> trong tệp bố cục của hoạt động bằng cách sử dụng lớp MapView hoặc theo phương thức lập trình bằng lớp GoogleMapOptions.

Ví dụ: giả sử bạn đã tạo một mã nhận dạng bản đồ được lưu trữ dưới dạng giá trị chuỗi có tên là map_id trong res/values/strings.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

Đối với các bản đồ được thêm thông qua phần tử <fragment> trong tệp bố cục của hoạt động, tất cả các mảnh bản đồ phải có kiểu tuỳ chỉnh đều phải chỉ định mã bản đồ trong thuộc tính map:mapId:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
        map:mapId="@string/map_id" />

Bạn cũng có thể sử dụng thuộc tính map:mapId của lớp MapView để chỉ định một mã bản đồ:

<com.google.android.gms.maps.MapView
    xmlns:map="http://schemas.android.com/apk/res-auto"
    ....
    map:mapId="@string/map_id" />

Để chỉ định mã bản đồ theo phương thức lập trình, hãy truyền mã đó đến một thực thể MapFragment bằng cách sử dụng lớp GoogleMapOptions:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Trong Android Studio, hãy tạo và chạy ứng dụng như bình thường. Kiểu tuỳ chỉnh được định cấu hình ở bước đầu tiên sẽ được áp dụng cho tất cả các bản đồ có mã bản đồ được chỉ định.

Android 3D

Đặt thuộc tính mapId String lên Map3DOptions theo phương thức lập trình hoặc bằng cách sử dụng thuộc tính bố cục. Map3DOptions được cung cấp cho đối tượng Map3DView trong quá trình khởi tạo và không thể thay đổi sau khi Map3DView được tạo.

Nhà phát triển có thể tuỳ ý triển khai một OnMapIdErrorListener mới để được thông báo và phản ứng với mã bản đồ không hợp lệ hoặc không tìm thấy.

Thêm mã bản đồ, tạo bản đồ theo phương thức lập trình và đặt một OnMapIdErrorListener:

import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode

class MainActivity : Activity(), OnMap3DViewReadyCallback, OnMapIdError {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }

  override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
    googleMap3D.setMapIdErrorListener(
      object : OnMapIdErrorListener {
        override fun onMapIdError() {
          // Handle error event.
        }
      }
    )
  }
}

Thêm mã bản đồ bằng cách sử dụng các thuộc tính bố cục:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:map3d="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent" android:layout_height="match_parent">
 <com.google.android.gms.maps3d.Map3DView
     android:id="@+id/map3dView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     map3d:mode="hybrid"
     map3d:mapId="MAP_ID"/>
</LinearLayout>

iOS

Để khởi tạo một bản đồ bằng mã bản đồ, hãy làm như sau:

  1. Tạo một GMSMapID bằng chuỗi mã bản đồ từ Cloud Console.
  2. Tạo một GMSMapView chỉ định mã bản đồ mà bạn vừa tạo.

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

Nếu đang sử dụng mã bản đồ của riêng mình, bạn có thể đặt mã bản đồ trong Cloud Console để có một kiểu mới bất cứ lúc nào. Kiểu đó sẽ tự động xuất hiện trên chế độ xem bản đồ cho bạn và người dùng trong khoảng 6 giờ.

Nếu muốn xem các thay đổi ngay lập tức, bạn có thể đóng và khởi động lại ứng dụng bằng cách thoát ứng dụng, buộc ứng dụng thoát khỏi danh sách ứng dụng đã dùng gần đây, rồi mở lại ứng dụng. Sau đó, bản đồ mới cập nhật sẽ xuất hiện.

iOS 3D

Nhà phát triển iOS có thể đặt một đối tượng sửa đổi style mới trên Map. Đối tượng sửa đổi này chấp nhận một mã bản đồ và không bắt buộc phải có một bao đóng để gọi khi mã bản đồ không hợp lệ hoặc không tìm thấy.

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
        latitude: 0.0,
        longitude: 0.0,
      ),
      mode: .hybrid
    )
    .style(
      with: "MAP_ID",
      error: {
        // Handle styling error.
      }
    )
    // Could also use trailing closure syntax
    //  .style(with: "MAP_ID") {
    //     // Handle styling error.
    //  }
  }
}

JavaScript

Cách tạo bản đồ có mã bản đồ trong mã xử lý ứng dụng:

  1. Nếu bạn đang tuỳ chỉnh bản đồ bằng mã JSON được nhúng, hãy xoá thuộc tính styles khỏi đối tượng MapOptions; nếu không, hãy bỏ qua bước này.

  2. Thêm mã bản đồ vào bản đồ bằng cách sử dụng thuộc tính mapId. Ví dụ:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

JavaScript 3D

Để tạo một bản đồ có mã bản đồ trong ứng dụng, hãy thêm mã bản đồ vào bản đồ bằng cách sử dụng thuộc tính mapId. Ví dụ:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Maps Static

Để thêm mã bản đồ vào một bản đồ mới hoặc hiện có sử dụng một trong các API dịch vụ web của chúng tôi, hãy thêm tham số URL map_id và đặt tham số đó thành mã bản đồ của bạn. Ví dụ này minh hoạ cách thêm mã bản đồ vào bản đồ bằng Maps Static API.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

Bản đồ tập trung vào Cầu Brooklyn ở Thành phố New York, NY, Hoa Kỳ, có các chế độ điều khiển bản đồ ở góc dưới cùng bên phải. Bản đồ hiển thị kiểu tuỳ chỉnh trên đường, nước và đất liền.

Nếu có chữ ký số trong URL Maps tĩnh trước khi thêm mã bản đồ, bạn cần phải tạo và thêm chữ ký số mới sau khi thêm mã bản đồ. Khi tạo khoá bí mật ký URL mới, hãy nhớ xoá chữ ký số trước đó khỏi URL.