Ví dụ cũ

Android

Chạy ứng dụng mẫu Apidemos

Để chạy ứng dụng mẫu Apidemos, hãy xem mẫu GitHub (Java | Kotlin) và xem bản minh hoạ CloudBasedMapStylingDemoActivity (Java | Kotlin).

Bạn có thể tìm thấy ứng dụng mẫu JavaKotlin minh hoạ cách tạo kiểu cho bản đồ Android trên đám mây.

Vấn đề đã biết

Sau khi ứng dụng của bạn được phân phối cho khách hàng, bạn có thể cập nhật các kiểu tuỳ chỉnh cho bản đồ có mã bản đồ từ Google Cloud Console. Kiểu mới sẽ được phản ánh trong ứng dụng của bạn sau vài giờ.

Để đảm bảo các kiểu tuỳ chỉnh mới sẽ xuất hiện ngay lập tức cho mục đích kiểm thử, hãy xoá dữ liệu ứng dụng khỏi thiết bị thử nghiệm. Để biết thêm thông tin về cách xoá dữ liệu khỏi thiết bị của bạn, hãy xem phần Trợ giúp về Android – Giải phóng dung lượng.

Xin lưu ý rằng các chế độ cài đặt có thể khác nhau tuỳ theo điện thoại. Để biết thêm thông tin, hãy liên hệ với nhà sản xuất thiết bị.

iOS

Chạy ứng dụng mẫu Apidemos

Để chạy ứng dụng mẫu Apidemos, hãy xem ứng dụng mẫu Google Maps mẫu trên GitHub và xem dự án CloudBasedMapStylingViewController (mẫu GitHub cho Swift | Objective-C).

Bản minh hoạ tạo kiểu trên đám mây CocoaPod hoặc GitHub không bắt buộc

Thay vì bắt đầu từ đầu, bạn có thể dùng thử ứng dụng mẫu Objective-C để minh hoạ cách tạo kiểu cho bản đồ iOS từ đám mây. Để biết thông tin chi tiết, hãy xem mẫu Objective-C.

Tạo ứng dụng minh hoạ Beta

Trong Xcode, hãy nhấn vào nút biên dịch để tạo rồi chạy lược đồ hiện tại. Bản dựng sẽ tạo một lỗi, nhắc bạn nhập khoá API vào tệp SDKDemoAPIKey.h.

Nếu bạn chưa có khoá API, hãy thiết lập một dự án trên Cloud Console và nhận khoá API bằng cách làm theo hướng dẫn trong bài viết Lấy khoá API. Khi định cấu hình khoá trên Cloud Console, bạn có thể chỉ định giá trị nhận dạng gói của ứng dụng để đảm bảo chỉ ứng dụng của bạn mới có thể sử dụng khoá. Giá trị nhận dạng gói mặc định của ứng dụng mẫu SDK là com.example.GoogleMapsDemos.

Chỉnh sửa tệp SDKDemoAPIKey.h và dán khoá API vào phần định nghĩa của hằng số kAPIKey:

static NSString *const kAPIKey = @"YOUR_API_KEY";

Nếu Xcode nhắc bạn mở khoá tệp SDKDemoAPIKey.h để chỉnh sửa, hãy chọn Mở khoá.

Xoá dòng sau:

```
#error Register for API Key and insert here.
```

Tạo bản dựng và chạy dự án.

Bản minh hoạ bản đồ định kiểu trên đám mây

Bản minh hoạ CloudStyling cho thấy cách tạo kiểu cho bản đồ bằng cách sử dụng một tập hợp kiểu trên Google Cloud Console.

Khi ứng dụng minh hoạ chạy, hãy nhấp vào bản minh hoạ Tuỳ chỉnh bản đồ trong phần Mẫu Beta ở đầu danh sách.

Nhấp vào Style Map (Bản đồ kiểu) để xem ảnh hưởng của việc tải các mã bản đồ khác nhau.

Bạn cũng có thể thử thêm kiểu của riêng mình ("Bản đồ kiểu" > "Thêm mã bản đồ mới") và xem nội dung cập nhật bản đồ với bản đồ được tạo kiểu tuỳ chỉnh.

JavaScript

Đây là một ví dụ cơ bản về việc tải bản đồ được tạo kiểu tuỳ chỉnh bằng cách sử dụng mã bản đồ. Trong trường hợp này, JavaScript của Maps sẽ tham chiếu đến mã bản đồ 8e0a97af9386fef khi bản đồ được tải và tự động áp dụng kiểu bản đồ liên kết với mã bản đồ đó.

TypeScript

function initMap(): void {
  new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      mapId: "8e0a97af9386fef",
      center: { lat: 48.85, lng: 2.35 },
      zoom: 12,
    } as google.maps.MapOptions
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

function initMap() {
  new google.maps.Map(document.getElementById("map"), {
    mapId: "8e0a97af9386fef",
    center: { lat: 48.85, lng: 2.35 },
    zoom: 12,
  });
}

window.initMap = initMap;
Xem ví dụ

Thử mẫu

Maps Static API

Mã bản đồ là giá trị nhận dạng được liên kết với một kiểu hoặc đối tượng bản đồ cụ thể. Định cấu hình kiểu bản đồ và liên kết kiểu đó với mã bản đồ trong Google Cloud Console. Sau đó, khi bạn tham chiếu một mã bản đồ trong mã của mình, kiểu bản đồ liên kết với kiểu bản đồ đó sẽ hiển thị trong ứng dụng. Mọi nội dung cập nhật kiểu tiếp theo mà bạn thực hiện sẽ tự động xuất hiện trong ứng dụng mà không cần khách hàng cập nhật.

  1. Nếu bạn đang sử dụng kiểu bản đồ trên đám mây với một bản đồ hiện có được tuỳ chỉnh bằng tham số style, hãy nhớ xoá các bản đồ đó để tránh khả năng xung đột với các tính năng trong tương lai.

  2. Để thêm mã bản đồ vào một bản đồ mới hoặc bản đồ hiện có sử dụng một trong các API 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 cách sử dụ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=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />