Penataan gaya peta berbasis cloud

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Google Maps Platform menawarkan fitur gaya visual peta berbasis Cloud yang memudahkan Anda untuk menata gaya, menyesuaikan, dan mengelola peta menggunakan Google Cloud Console, sehingga Anda dapat membuat pengalaman peta yang disesuaikan untuk pengguna tanpa harus memperbarui kode aplikasi setiap kali Anda membuat perubahan gaya.

Gaya yang dibuat sebelum 15 September 2020 tidak akan menampilkan fitur alami yang ditingkatkan pada Google Maps. Guna memanfaatkan dukungan fitur alami yang ditingkatkan pada Google Maps untuk gaya visual peta, Anda harus membuat Gaya peta.

Gaya visual peta berbasis Cloud memungkinkan Anda membuat dan mengedit gaya peta untuk setiap aplikasi yang menggunakan Google Maps, tanpa memerlukan perubahan pada kode setelah ID peta diterapkan. Semua perubahan gaya dapat dilakukan di Cloud Console, tanpa memerlukan keahlian coding. Ubah tampilan dan warna berbagai elemen peta seperti jalan, bangunan, perairan, lokasi menarik, dan rute transportasi umum.

Fitur-fitur ini meliputi:

  • Gaya visual peta berbasis cloud: Daripada menata gaya peta dalam kode menggunakan JSON, Anda dapat mengelola dan menata gaya peta dinamis dan statis di Cloud Console menggunakan ID Peta dan gaya peta.
  • Peta Vektor: Developer JavaScript dapat memilih untuk menggunakan peta berbasis vektor yang diakselerasi oleh WebGL yang sama yang tersedia di maps.google.com secara langsung di aplikasi web mereka sendiri.
  • Pemfilteran POI bisnis: Lima kategori lokasi menarik bisnis dapat dihapus dari tampilan peta.
  • Kontrol Kepadatan POI: Kepadatan lokasi menarik yang ditampilkan di peta dasar dapat disesuaikan untuk menampilkan lebih banyak atau lebih sedikit lokasi menarik secara default.

Meskipun gaya visual peta berbasis Cloud tersedia di Maps SDK for Android1, Maps SDK for iOS, JavaScript, dan Maps Static API, tidak semua fiturnya dapat dilihat di semua platform.

Sebelum memulai

  • Buat ID peta
    Untuk menggunakan penataan gaya peta berbasis Cloud, peta Anda harus dimuat menggunakan ID peta.
  • Bermigrasi dari penataan gaya hard code
    Sebelum menambahkan ID peta untuk menggunakan penataan gaya peta berbasis Cloud pada peta yang ada yang disesuaikan dengan gaya visual hard code, seperti parameter kueri JSON atau URL, sebaiknya hapus gaya visual hard code untuk menghindari potensi konflik dengan fungsi di masa mendatang. Anda dapat mengimpor gaya visual JSON ke gaya peta baru.
* Upgrade Maps SDK for Android
Untuk menggunakan penataan gaya peta berbasis Cloud, Anda harus menggunakan Maps SDK for Android versi 18.0.0 atau yang lebih baru dan menggunakan perender Maps SDK for Android terbaru.

Penagihan

Penggunaan gaya visual peta berbasis Cloud memerlukan ID peta. Pada Maps SDK for Android, Maps SDK for iOS, dan JavaScript, menggunakan ID peta akan dikenai biaya terhadap SKU Dynamic Maps. Di Maps Static API, penggunaan ID peta akan dikenai biaya atas SKU Static Maps.

Contoh

Android

Menjalankan aplikasi contoh ApiDemos

Untuk menjalankan aplikasi contoh ApiDemos, lihat contoh GitHub (Java | Kotlin) dan lihat demo CloudBasedMapStylingDemoActivity (Java | Kotlin).

Anda dapat menemukan aplikasi contoh Java dan Kotlin yang menunjukkan cara menata gaya peta Android dari cloud.

Masalah Umum

Setelah aplikasi diluncurkan kepada pelanggan, gaya kustom untuk peta dengan ID peta dapat diperbarui dari Google Cloud Console. Gaya baru akan diterapkan pada aplikasi Anda dalam beberapa jam.

Hapus data aplikasi dari perangkat pengujian Anda guna memastikan gaya kustom baru segera ditampilkan untuk tujuan pengujian. Untuk informasi selengkapnya tentang cara menghapus data dari perangkat, lihat Bantuan Android - Mengosongkan Ruang Penyimpanan.

Perlu diingat bahwa setelan dapat berbeda-beda tergantung ponselnya. Untuk informasi selengkapnya, hubungi produsen perangkat Anda.

iOS

Menjalankan aplikasi contoh ApiDemos

Untuk menjalankan aplikasi contoh ApiDemos, lihat contoh GitHub aplikasi contoh GoogleMap, lalu lihat project CloudBasedMapStylingViewController (contoh GitHub untuk Swift | Objective-C).

Demo Penataan Gaya Cloud atau GitHub Opsional

Daripada memulai dari awal, Anda dapat mencoba aplikasi contoh Objective-C yang menunjukkan cara menata gaya peta iOS dari cloud di sini.

Mem-build aplikasi demo Beta

Dalam Xcode, tekan tombol compile untuk membangunnya kemudian jalankan skema saat ini. Build akan menghasilkan error, yang meminta Anda untuk memasukkan kunci API di file SDKDemoAPIKey.h.

Jika Anda belum memiliki kunci API, ikuti petunjuk ini untuk menyiapkan project di Cloud Console dan mendapatkan kunci API. Saat mengonfigurasi kunci di Cloud Console, Anda dapat menentukan ID paket aplikasi untuk memastikan bahwa hanya aplikasi Anda yang dapat menggunakan kunci tersebut. ID paket default aplikasi contoh SDK adalah com.example.GoogleMapsDemos.

Edit file SDKDemoAPIKey.h dan tempel kunci API Anda ke dalam definisi konstanta kAPIKey:

```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```

Jika Xcode meminta Anda membuka kunci file SDKDemoAPIKey.h untuk diedit, pilih Buka kunci.

Hapus baris berikut:

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

Bangun dan jalankan proyek.

Demo peta penataan gaya peta berbasis cloud

Demo CloudStyling menunjukkan cara menata gaya peta dengan menggunakan gaya yang ditetapkan di Google Cloud Console.

Saat aplikasi demo diluncurkan, klik demo Penyesuaian Peta pada bagian Sampel Beta di bagian atas daftar.

Klik Gaya Peta untuk melihat efek pemuatan ID Peta yang berbeda.

Anda juga dapat menambahkan gaya sendiri ("Peta Gaya" > "Tambahkan ID Peta baru"), dan lihat pembaruan peta menggunakan peta bergaya kustom.

JavaScript

Ini adalah contoh dasar dari pemuatan peta bergaya kustom menggunakan ID peta. Dalam hal ini, Maps JavaScript mereferensikan ID peta 8e0a97af9386fef saat peta dimuat, dan otomatis menerapkan gaya peta yang saat ini terkait dengan ID peta tersebut.

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;
Lihat contoh

Mencoba Contoh

Maps Static API

ID peta adalah ID yang dikaitkan dengan gaya atau fitur peta tertentu. Konfigurasikan gaya peta dan kaitkan dengan ID peta di Google Cloud Console. Selanjutnya, saat Anda mereferensikan ID peta dalam kode, gaya peta yang terkait akan ditampilkan di aplikasi Anda. Setiap perubahan gaya yang selanjutnya Anda buat akan otomatis ditampilkan di aplikasi, tanpa perlu update dari pelanggan.

  1. Jika Anda menggunakan penataan gaya peta berbasis Cloud dengan peta yang ada yang disesuaikan dengan parameter style, pastikan untuk menghapusnya untuk menghindari potensi konflik dengan fungsi di masa mendatang.

  2. Untuk menambahkan ID peta ke peta baru atau yang sudah ada yang menggunakan salah satu API web kami, tambahkan parameter URL map_id dan tetapkan ke ID peta Anda. Contoh ini menunjukkan penambahan ID peta ke peta menggunakan 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" />
    


  1. Gaya visual peta berbasis Cloud tidak tersedia di Mode Ringan Android