Wednesday, February 17, 2021

author photo

Daftar isi [Tampil]

Sejak mempromosikan produk Google Cloud secara besar-besaran, Google akhirnya memberlakukan tarif untuk penggunaan produk-produk utama mereka salah satunya Google Maps. Jika Anda ingin menggunakan Google Maps kustom seperti menampilkan static map atau membuat tampilan peta custom seperti contoh peta biru dibawah ini, maka Anda membutuhkan Google Maps API guna mewujudkan hal tersebut.

Contoh Google Maps Javascript API
Contoh Google Maps Javascript API

Pada dasarnya, implementasi API Google Maps tidaklah sulit, namun Anda perlu mendaftarkan diri terlebih dahulu di layanan Google Cloud Platform. Untuk para pengguna Google Maps API, ada free credit senilai $200/bulan sehingga bisa saja penggunaan maps api Anda tidak dikenakan biaya jika masih dibawah angka tersebut. Saya kira, pada umumnya, untuk penggunaan dibawah 500 api call perhari, credit tersebut masih bisa mengcover kebutuhan kamu sehingga maps api Anda bisa gratis sama sekali.

harga dan kredit bulanan gratis Google Maps API
harga dan kredit bulanan gratis Google Maps API

Berikut langkah-langkah membuat API Google Maps serta tips dalam penggunannya:


  1. Daftar terlebih dahulu di layanan Google Cloud Platform (cloud.google.com), isi metode pembayaran dan profil pengguna yang valid karena proses verifikasi dari tim Google Cloud cukup ketat.
  2. Setelah berhasil mendaftarkan diri dan menambahkan metode pembayaran yang valid, Anda dapat meng-create "projects" yang nantinya akan digunakan untuk men-generate Google Maps API.
    buat project baru di google chrome
    buat project baru di google chrome
  3. Pilih project yang baru dibuat, lalu arahkan menu Google Cloud yang ada disamping kiri dan pilih APIs & Services dan klik submenu Credentials.
    pilih APIs Credentials
    pilih APIs Credentials
  4. Klik pilihan + Create Credentials di bagian atas dan pilih API key. Nah sampai tahapan ini, sebenarnya Anda sudah memiliki Google Maps API (contoh: AIzaSyBax4O4XquCBbGGtxIK-jaJzIsYqU) , hanya saja kita akan buat restrictions sehingga api tersebut tidak dapat disalahgunakan orang lain. Untuk melakukannya, klik tombol Restrict Key.
  5. Klik HTTP Referers di bagian Application restrictions dan masukkan alamat website tempat Anda akan menggunakan api tersebut. Ingat, jangan lupa sertakan lengkap dengan protokol websitenya, misal: https://cekips.com/*
  6. Jika sudah menggatur http restrictions, langkah selanjutnya adalah mengatur jenis API apa saja yan kita butuhkan untuk membatasi penggunaan api agar lebih spesifik. Jika Anda inging menggunakannya untuk Google Maps saja, maka centang dibagian MAPS Javascript API. Jika sudah selesai, klik Save agar perubahan Anda disimpan dan Maps API sudah siap digunakan.
    batasi jenis penggunaan api
    batasi jenis penggunaan api
  7. Cara menggunakan Google Maps api cukup mudah, Anda hanya perlu menambahkan parameter key=API_KEY dibelakang script yang ingin kalian pakai, contoh penggunaan untuk Maps API seperti dibawah ini:
<script src="https://maps.googleapis.com/maps/api/js?key=[API-KEY]&callback=initMap"></script>

Setelah semua tahap diatas selesai, maka kode Google Maps API sudah kalian dapatkan. Langkah terakhir adalah memasukkan script diatas ke halaman website yang ingin dipasang Google Maps. Kode tersebut dapat diletakkan di bagian head, body, ataupun footer tergantung kebutuhan kalian. Bagaimana, mudah saja bukan mendapatkan API Google Maps Secara gratis?


Jika Anda ingin melihat contoh penggunaan Google Maps API yang valid, Anda dapat lihat penggunaan Maps Javascript API di website Cekips.com yang secara otomatis akan menampilkan geolokasi dari alamat IP Anda dengan engine Google Maps. Sekain tutorial produk Google kali ini dan semoga bermanfaat untuk para pengguna Google Maps sekalian.

Next article Next Post
Previous article Previous Post