Sử dụng mã bản đồ

Mã bản đồ là giá trị nhận dạng duy nhất dùng để biểu thị một thực thể của Google Maps. 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 Google Cloud Console trên trang Quản lý bản đồ.

Những việc bạn có thể làm với mã bản đồ

Sử dụng mã bản đồ để bật các tính năng và định kiểu. Sau đây là một số ví dụ về cách sử dụng mã bản đồ. Để xem danh sách đầy đủ, hãy xem phần Các tính năng sử dụng mã bản đồ:

  • Định kiểu bản đồ dựa trên đám mây: Liên kết mã bản đồ với kiểu bản đồ để định kiểu, tuỳ chỉnh và quản lý bản đồ bằng Google Cloud Console. Có trên tất cả nền tảng: JavaScript, Android, iOSMaps Static API.

  • Bản đồ vectơ: Sử dụng mã bản đồ để sử dụng bản đồ bao gồm các ô dựa trên vectơ được vẽ tại thời điểm tải ở phía máy khách bằng WebGL. Có trên JavaScript.

  • Điểm đánh dấu nâng cao: Sử dụng mã bản đồ để bật tính năng Điểm đánh dấu nâng cao. Có trên JavaScript, AndroidiOS.

Ví dụ về cách định kiểu bản đồ dựa trên đám mây

Để sử dụng tính năng định kiểu bản đồ dựa trên đám mây nhằm định kiểu bản đồ trên trang web và ứng dụng Android, hãy làm theo các bước sau:

  1. Tạo mã bản đồ cho từng nền tảng mà bạn đang sử dụng. Ví dụ: tạo một mã JavaScript và mã bản đồ Android. Để biết thông tin chi tiết, hãy xem phần Tạo mã bản đồ.

  2. Định cấu hình kiểu bản đồ trên Google Cloud Console. Để biết thông tin chi tiết, hãy xem phần định kiểu bản đồ dựa trên đám mây.

  3. Liên kết cả hai mã bản đồ với kiểu bản đồ trong Google Cloud Console. Để biết thông tin chi tiết, hãy xem bài viết Liên kết mã bản đồ với kiểu của bạn.

  4. Tham chiếu mã bản đồ trong JavaScript của trang web và mã ứng dụng Android. Để biết thông tin chi tiết, hãy xem bài viết Thêm mã bản đồ vào ứng dụng.

Sau đó, kiểu bản đồ được liên kết với mã bản đồ sẽ xuất hiện trên trang web và trong ứng dụng Android của bạn. Bạn có thể cập nhật kiểu bản đồ trong Cloud Console và các thay đổi sẽ tự động xuất hiện ở cả hai nơi mà khách hàng không cần cập nhật ứng dụng.

Các tính năng sử dụng mã bản đồ

Bảng sau đây cho thấy các tính năng và API của Google Maps Platform sử dụng mã bản đồ:

Tính năng hoặc API Sử dụng mã bản đồ để thực hiện các mục tiêu này
Điểm đánh dấu nâng cao Bật điểm đánh dấu nâng cao. Bạn không cần tạo mã bản đồ mà có thể sử dụng mã bản đồ minh hoạ "DEMO_MAP_ID".
Kiểu dựa trên dữ liệu cho ranh giới Liên kết mã bản đồ với một tập hợp ranh giới và kiểu để định kiểu cho bản đồ theo ranh giới.
Kiểu dựa trên dữ liệu cho tập dữ liệu Liên kết mã bản đồ với một tập dữ liệu và kiểu để tạo kiểu cho bản đồ theo tập dữ liệu.
Flutter Định kiểu cho Google Maps được sử dụng trong ứng dụng Flutter.
Maps Embed API Chỉ định và tạo kiểu cho bản đồ sẽ được nhúng trên trang web.
Maps JavaScript API Định kiểu cho bản đồ hiển thị trên trang web.
SDK Bản đồ dành cho Android Định kiểu cho bản đồ sẽ hiển thị trong ứng dụng Android.1
SDK Bản đồ dành cho iOS Định kiểu cho bản đồ hiển thị trong ứng dụng iOS.1
Maps Static API Chỉ định và tạo kiểu cho bản đồ để hiển thị dưới dạng hình ảnh tĩnh.
Giải pháp di động Sử dụng API JavaScript của Maps và SDK cho Android và iOS để tạo kiểu cho bản đồ trong các giải pháp Di chuyển.1
WebGL (Bản đồ vectơ) Bật các tính năng WebGL bằng mã nhận dạng bản đồ vectơ JavaScript.

1 Việc sử dụng mã bản đồ trên SDK Bản đồ dành cho Android hoặc SDK Bản đồ dành cho iOS sẽ kích hoạt một lượt tải bản đồ được tính phí theo SKU Bản đồ động.

Cách tạo và sử dụng mã bản đồ

Mã bản đồ là giá trị nhận dạng duy nhất đại diện cho một bản sao của Google Maps. Bạn tạo mã bản đồ và cập nhật kiểu bản đồ được liên kết với mã bản đồ trong Cloud Console.

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

Để tạo hoặc quản lý mã bản đồ trong dự án, bạn phải sử dụng một chủ thể có quyền ở cấp vai trò thích hợp, 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ề vai trò cơ bản và vai trò được xác định trước trong IAM.

Tạo mã bản đồ

Bạn có thể tạo mã bản đồ và cập nhật kiểu liên kết với mã bản đồ bất cứ lúc nào trong Cloud Console.

Để tạo mã bản đồ, hãy làm theo các bước sau:

  1. Đăng nhập và mở một dự án trên Cloud Console có các quyền cần thiết.

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

  3. Chọn 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 trường Mô tả, hãy mô tả mục đích sử dụng 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 bài viết Bản đồ vectơ.
    4. Chọn Lưu để hiển thị mã bản đồ mới.

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

Hướng dẫn này giả định rằng dự án của bạn có ít nhất một kiểu bản đồ hiện có. Nếu bạn chưa có kiểu bản đồ nào, hãy xem phần Kiểu bản đồ trên đám mây rồi chọn nền tảng của bạn để xem hướng dẫn cách tạo kiểu.

  1. Trong Cloud Console, hãy chuyển đến trang Quản lý Maps.
  2. Trong bảng, hãy chọn một mã bản đồ hiện có.
  3. Trong mục Kiểu bản đồ được liên kết, hãy chọn một kiểu bản đồ.
  4. Chọn Lưu.

    Trang chi tiết về mã bản đồ, nơi bạn liên kết một kiểu 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 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ã bản đồ được lưu trữ dưới dạng giá trị chuỗi có tên 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 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 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ã bản đồ:

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

Để chỉ định mã nhận dạng bản đồ theo phương thức lập trình, hãy truyền mã nhận dạng đó đế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. Các 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ả bản đồ có mã bản đồ được chỉ định.

iOS

Để tạo bản sao của một bản đồ bằng mã bản đồ, hãy làm như sau:

  1. Tạo GMSMapID bằng chuỗi mã bản đồ từ Cloud Console.
  2. Tạo GMSMapView chỉ định mã bản đồ 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ó kiểu mới bất cứ lúc nào. Kiểu đó sẽ tự động được phản ánh trên chế độ xem bản đồ cho bạn và người dùng trong vòng 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 thoát ứng dụng khỏi danh sách ứng dụng đã sử dụng gần đây, sau đó mở lại ứng dụng. Sau đó, bản đồ đã cập nhật sẽ xuất hiện.

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 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'
});

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 cho thấy 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" />

Một bản đồ có tâm là Cầu Brooklyn ở Thành phố New York, New York, Hoa Kỳ, với các nút điều khiển bản đồ ở góc dưới bên phải. Bản đồ hiển thị kiểu tuỳ chỉnh trên đường, nước và đất.

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