Tempatkan peta interaktif, atau panorama Street View pada halaman web Anda dengan Permintaan HTTP—tidak memerlukan JavaScript.
Biaya
Semua permintaan Maps Embed API tersedia tanpa biaya dengan penggunaan tidak terbatas. Namun, semua permintaan masih memerlukan kunci Google Cloud API yang valid. Untuk informasi selengkapnya, lihat Penggunaan dan Penagihan.
Sebelum memulai
Untuk membuat peta tersemat pada laman web Anda, selesaikan langkah-langkah penyiapan yang diperlukan dengan mengklik tab berikut:
Langkah 1
Konsol
-
Di Konsol Google Cloud, pada halaman pemilih project, klik Create Project untuk mulai membuat project Cloud baru.
-
Pastikan penagihan diaktifkan untuk project Cloud Anda. Konfirmasikan bahwa penagihan diaktifkan untuk project Anda.
Google Cloud menawarkan uji coba tanpa biaya. Masa uji coba berakhir setelah 90 hari atau setelah akumulasi tagihan akun mencapai $300, mana saja yang lebih dulu. Batalkan kapan saja. Google Maps Platform memberikan kredit bulanan berulang sebesar $200. Untuk informasi selengkapnya, lihat Kredit akun penagihan dan Penagihan.
Cloud SDK
gcloud projects create "PROJECT"
Baca selengkapnya tentang Google Cloud SDK, Penginstalan Cloud SDK, dan perintah berikut:
Langkah 2
Untuk menggunakan Google Maps Platform, Anda harus mengaktifkan API atau SDK yang akan digunakan dengan project.
Konsol
Cloud SDK
gcloud services enable \ --project "PROJECT" \ "maps-embed-backend.googleapis.com"
Baca selengkapnya tentang Google Cloud SDK, Penginstalan Cloud SDK, dan perintah berikut:
Langkah 3
Langkah ini hanya ada di proses pembuatan Kunci API. Jika Anda menggunakan Kunci API dalam produksi, kami sangat menyarankan agar Anda membatasi kunci API. Anda dapat menemukan informasi selengkapnya di halaman Menggunakan Kunci API spesifik per produk.
Kunci API adalah ID unik yang mengautentikasi permintaan terkait project untuk tujuan penggunaan dan penagihan. Anda harus memiliki setidaknya satu kunci API terkait project.
Untuk membuat kunci API:
Konsol
-
Buka halaman Google Maps Platform > Credentials.
-
Pada halaman Credentials, klik Create credentials > API key.
Dialog API key created akan menampilkan kunci API yang baru dibuat. -
Klik Close.
Kunci API baru dicantumkan pada halaman Credentials di bawah API keys.
(Jangan lupa untuk membatasi kunci API sebelum menggunakannya dalam produksi.)
Cloud SDK
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
Baca selengkapnya tentang Google Cloud SDK, Penginstalan Cloud SDK, dan perintah berikut:
Membuat iframe
Klik opsi berikut dan tambahkan lokasi serta kunci API untuk membuat iframe untuk halaman web Anda. Untuk parameter dan opsi tambahan, lihat Menyertakan peta.
Menguji iframe Anda
Untuk melihat iframe di jendela browser HTML:
- Buka editor teks default Anda. Anda harus memiliki editor teks seperti TextEdit atau Microsoft Windows Notepad diinstal di perangkat Anda secara {i>default<i}.
- Buat file HTML dan beri nama
index.html
. Tambahkan kode berikut dengan iframe yang Anda buat di atas:
<html> <!-- Replace this code comment with your iframe. --> </html>
Simpan file HTML
index.html
Anda.Muat file HTML di browser web dengan menariknya dari desktop ke browser Anda; atau, mengklik dua kali pada file juga dapat digunakan pada sebagian besar sistem operasi.
Selamat! Anda baru saja menyiapkan dan membuat peta menggunakan Maps Embed API.
Pembersihan
Anda dapat menghapus project Google Cloud guna menghentikan penagihan untuk semua resource yang digunakan dalam proyek tersebut.
- Di Konsol Google Cloud, buka halaman Mengelola resource:
- Jika project yang ingin Anda hapus tertaut ke organisasi, pilih dan luaskan daftar organisasi di bagian atas halaman.
- Dalam daftar project, pilih project yang ingin Anda hapus, lalu klik Hapus.
- Pada dialog, ketik project ID, lalu klik Shut down untuk menghapus project.
Langkah berikutnya
Mulai kembangkan aplikasi menggunakan Maps Embed API dengan menyiapkan Project Google Cloud:
Untuk daftar parameter dan opsi tambahan yang dapat Anda tambahkan di iframe:
Perluas project Maps Anda dengan Javascript API: