devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Audit Situs

Generator Google Maps API — Marker Kustom, Tempat & Ulasan

Atur peta Google secara visual: pilih gaya peta, tambahkan marker kustom dengan jendela info, aktifkan pencarian tempat, dan tampilkan ulasan Google. Pratinjau dengan API key milikmu, lalu salin kode siap pakai atau tempelkan ke Webflow.

Diperbarui

Ini pratinjau dasar. Gaya peta, marker kustom, pencarian, dan ulasan akan muncul setelah kamu memasukkan API key Google milikmu di sebelah kanan. Kamu tetap bisa mengatur semuanya dan menyalin kodenya tanpa key. Dapatkan key dari Google.

Aktifkan API berikut di proyek Google Cloud kamu:

    
  
    
  

    
    
     Data kamu tidak pernah meninggalkan komputer kamu. Semua proses berjalan 100% secara lokal di browser kamu.
    Apakah alat ini membantu?0.0 0 penilaian
    
    
    
    Ubah alamat atau koordinat jadi embed Google Maps yang responsifGenerator Embed Google Maps →
    
    
    
      
    Cara menggunakan Generator Google Maps API
    1. Atur lokasi, zoom, gaya peta, dan ukurannya.
    2. Tambahkan marker: beri setiap marker warna, posisi, dan teks untuk jendela info-nya.
    3. Aktifkan pencarian tempat atau ulasan Google jika kamu membutuhkannya.
    4. Tempelkan API key kamu untuk melihat pratinjau lengkap, lalu salin kodenya atau pakai Salin ke Webflow.
    

    Cara mendapatkan API key Google Maps
    

    1. Buka konsol Google Cloud dan buat proyek dengan penagihan (billing) yang sudah aktif.
    2. Aktifkan API yang didaftarkan tool ini sesuai pengaturanmu.
    3. Buat API key di bagian Keys & Credentials.
    4. Batasi key hanya untuk alamat situsmu dan API tersebut. Key di kode web bersifat publik, jadi pembatasan inilah yang menjaganya tetap aman.
    

    Untuk memakai pratinjau langsung di sini, izinkan devpack.app/* sebagai situs selama kamu menguji, atau gunakan key terpisah untuk tes.
    

    Biayanya berapa?
    

    Google menagih berdasarkan pemakaian dan menyediakan kuota gratis bulanan untuk setiap API. Ulasan memakai permintaan Place Details yang tarifnya lebih tinggi, jadi atur peringatan anggaran di Google Cloud. Cek halaman harga Google untuk angka terbaru.
    

    Tentang kode yang dihasilkan
    

    Kotak pencarian dan ulasan memakai Places API (New) terbaru Google, karena layanan Places lama tidak tersedia untuk proyek baru. Setiap marker bisa berupa pin, titik, kotak, atau bintang berwarna, atau gambar sendiri dari URL atau unggahan di bawah 100 KB. Marker memakai google.maps.Marker agar bisa dipadukan dengan gaya peta JSON. Google menyarankan Advanced Markers untuk proyek baru, tetapi itu memerlukan Map ID dan gaya berbasis cloud, jadi tool ini tidak membuatnya. Ketentuan Google meminta ulasan ditampilkan beserta atribusinya, dan kode yang dihasilkan sudah menyertakannya.
    

    Cuma butuh peta sederhana tanpa key? Pakai Generator Embed Google Maps. Terkait: Pemilih Warna, Gaya Tombol CSS.
    Juga dicari sebagai: marker google maps kustom, contoh google maps javascript api, peta google kustom, gaya google maps, embed ulasan google, contoh google places api, google maps webflow.
    Tool yang cocok dipakai bersama Generator Google Maps API
    • Generator Schema Markup — Pilih jenis schema, isi formulir, lalu salin JSON-LD yang siap ditempel.
    • Generator Kode Embed YouTube — Tempel link YouTube apa pun — video, Short, atau playlist — dan dapatkan kode embed responsif dengan mode privasi yang ditingkatkan, waktu mulai dan selesai, autoplay tanpa suara, loop, dan caption, atau versi ringan “klik untuk memuat” yang menjaga halaman tetap cepat.
    • Format JSON — Tempel JSON untuk dirapikan, di-minify, atau divalidasi.
    • Analisis Header Email — Tempel header mentah dari email untuk melihat seluruh perjalanannya: setiap lompatan server beserta waktu tempuhnya, hasil SPF, DKIM dan DMARC, IP asal, serta tanda bahaya seperti Reply-To atau Return-Path yang tidak cocok.
    Pertanyaan yang sering diajukan
    Apakah API key saya aman di tool ini?
    Key tetap berada di tab browser ini untuk pratinjau. Key tidak disimpan dan tidak dikirim ke devpack. Key hanya dikirim ke Google, sama seperti halaman Maps pada umumnya.
    Apakah saya perlu API key?
    Ya, untuk Maps JavaScript API. Tanpa key, halaman ini hanya menampilkan pratinjau lokasi dasar. Untuk peta sederhana tanpa key, gunakan Generator Embed Google Maps.
    Kenapa pratinjau menyebut key tidak diotorisasi?
    Kemungkinan key kamu dibatasi hanya untuk situs milikmu sendiri. Tambahkan devpack.app/* ke daftar situs yang diizinkan selama menguji, atau gunakan key tes terpisah.
    Bagaimana cara mencari Place ID untuk ulasan?
    Cari bisnis tersebut di pencari Place ID Google, lalu salin ID-nya. ID biasanya diawali dengan ChIJ.
    Berapa banyak ulasan yang bisa ditampilkan Google?
    Places API mengembalikan maksimal lima ulasan untuk satu tempat, dan Google yang memilihnya. Kamu tidak bisa meminta semua ulasan lewat API ini.
    Bisakah saya menempelkan peta ke Webflow?
    Bisa. Tekan Salin ke Webflow lalu tempelkan di Designer. Kode akan masuk sebagai elemen Embed. Ganti YOUR_API_KEY di kode kecuali kamu sudah memilih untuk menyertakan key.
    Bisakah saya memasang Generator Google Maps API sebagai aplikasi web dan memakainya offline?
    Bisa. Generator Google Maps API adalah aplikasi web (PWA) yang bisa dipasang. Pemasangannya lewat browser kamu, bukan diunduh dari toko aplikasi. Klik Pasang aplikasi di bagian atas halaman ini di Chrome atau Edge (Windows, macOS, Linux, ChromeOS) atau di Android. Di iPhone dan iPad, gunakan Bagikan → Tambahkan ke Layar Utama, dan di Safari 17+ pada Mac, gunakan File → Tambahkan ke Dock. Setelah itu, aplikasi akan terbuka di jendelanya sendiri dengan ikonnya sendiri. Karena berjalan sepenuhnya di browser kamu, aplikasi ini tetap bisa dipakai offline. Firefox di desktop tidak bisa memasang aplikasi web. Cara memasang aplikasi.
    
      
    
    
    
    
    Tool terkait
    localGenerator Embed Google MapsTampilkan kantor, toko, atau acaramu di Google Maps tanpa perlu mendaftar API key. Ketik alamat, nama…localPemilih WarnaPilih warna apa pun, atau ambil dari layarmu, lalu salin sebagai HEX, RGB, HSL atau OKLCH. Lihat shade,…localGenerator Schema MarkupPilih jenis schema, isi formulir, lalu salin JSON-LD yang siap ditempel. Field wajib dan yang…localGenerator Kode Embed YouTubeTempel link YouTube apa pun — video, Short, atau playlist — dan dapatkan kode embed responsif dengan mode…localGaya Tombol CSSPilih dari 24 tombol CSS animasi: isian, border, glow, kilau, dan efek tekan 3D. Atur warna, ukuran, serta…localFormat JSONTempel JSON untuk dirapikan, di-minify, atau divalidasi. Error ditunjukkan tepat di baris dan kolomnya,…