Contoh lama

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 Konsol Google Cloud. 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 Google Maps dan lihat project CloudBasedMapStylingViewController (contoh GitHub untuk Swift | Objective-C).

Demo gaya visual Cloud opsional CocoaPod atau GitHub

Daripada memulai dari awal, Anda dapat mencoba aplikasi contoh Objective-C kami yang menunjukkan cara menata gaya peta iOS Anda dari cloud. Untuk mengetahui detailnya, lihat contoh Objective-C.

Membangun 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 dalam file SDKDemoAPIKey.h.

Jika Anda belum memiliki kunci API, siapkan project di Konsol Cloud dan dapatkan kunci API dengan mengikuti petunjuk di bagian Mendapatkan kunci API. Saat mengonfigurasi kunci di Konsol Cloud, Anda dapat menentukan ID paket aplikasi untuk memastikan bahwa hanya aplikasi Anda yang dapat menggunakan kunci tersebut. ID paket default untuk aplikasi contoh SDK adalah com.example.GoogleMapsDemos.

Edit file SDKDemoAPIKey.h dan tempelkan 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 gaya visual cloud

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

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

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

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

JavaScript

Contoh ini adalah contoh dasar dari pemuatan peta bergaya kustom menggunakan ID peta. Dalam hal ini, Maps JavaScript merujuk ke 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;
index.ts

JavaScript

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

window.initMap = initMap;
index.js
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 Gaya visual peta berbasis Cloud dengan peta yang sudah ada dan disesuaikan dengan parameter style, pastikan untuk menghapusnya untuk menghindari potensi konflik dengan fitur 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 menampilkan 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" />