API KEY GOOGLE MAPS BROWSER

Posted on 1 August , 2016 by Candra Adi Putra

Tutorial Implementasi Google Map Javascript Api Key

Beberapa Minggu terakhir, banyak yang menanyakan lewat WhatApp, Email dan BBM seputar tutorial Google Map API (berbasis web) yang error saat dicoba peta tidak muncul. Biasanya muncul pesan seperti dibawah ini.

Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Apa penyebabnya? Jika anda ingin tahu buka Chrome Developer pada tab Console dengan shortcut [CTRL]+[SHIFT]+[I] maka akan muncul pesan Seperti dibawa ini atau pesan yang mirip
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Google Map API sekarang sudah mengalami beberapa perubahan yang menyebabkan banyak tutorial Google map yang ditulis beberapa tahun yang lalu tidak bisa berjalan.Minimal ada ada dua perubahan yaitu dibagian Struktur Kode Javascript yang harus ada fungi Callbacknya dan Perubahan yang lain adalah API_KEY sekarang sifatnya WAJIB (dulu opsional). Silahkan liat sample script Google map terbaru di Sample Script Google Map.
Contoh sample kode

?

source code

<script>     var map;     function initMap() {       map = new google.maps.Map(document.getElementById('map'), {         center: {lat: -7.795580, lng: 110.369490},         zoom: 15       });     }   </script>   <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"   async defer></script>

Perhatikan  ada kata key=YOUR_API_KEY, artinya ganti dengan API key kita sendiri.

Mendapatkan Google Map Javascript API KEY

Untuk mendapatkan Key tersebut silahkan ikuti langkah langkah berikut

1. Login ke Google Api Console Dengan Akun Gmail Anda.
2. Create Project sebagai contoh “GoogleMapWeb”
3. Klik menu Library lalu klik link Google Map Javascript API
4. Klik Enable Seperti gambar dibawah ini
5. Selanjutnya Klik tombol biru  Go to Credentials
6. Proses selanjutnya adalah proses Membuat Apikey dengan 3 langkah
   • Langkah ke-1 , memilih jenis Apikey (pilihlah Google Map Javascript API) dan pada combo dibawahnya pilih web Browser (lihat screenshot dibawah ini) lalu klik tombol “What Credentials do I Need?”
     

• Langkah ke-2 Beri nama api key anda misal ‘mymapkey’ , jika anda ingin membatasi agar key tersebut hanya bisa dipakai di satu domain, maka isikan nama domain di kolom berikutnya. (opsional, kosong tidak masalah).

Langkah ke-3 akan muncul API Key anda, silahkan kopi paste di script Google Map anda. 

Implementasi API KEY  di Kode Program Google Map

?

source code

<script>       var map;       function initMap() {         map = new google.maps.Map(document.getElementById('map'), {           center: {lat: -7.795580, lng: 110.369490},           zoom: 15         });       }     </script>     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzEq7EWw1Jk6kyk4ilZ1TqDxxxxxxxx&callback=initMap"     async defer></script>

Catatan Penting Troubleshooting Google Map

1. Selalu mengacu ke https://developers.google.com/maps/ untuk referensi Google Map API.
2. Jika peta tidak muncul atau tidak berjalan sebagai mana mestinya, perhatikan penyebabnya di Chrome Developer Tool [CTRL]+[SHIFT]+[I] di tab Console (selalu gunakan Chrome untuk mendebug). Pesan error dan penyebabnya akan tampak disitu lalu buka halaman https://developers.google.com/maps/documentation/javascript/error-messages untuk mendapatkan solusinya.
3. Simpan API Key anda dan jangan disebar keorang lain karena key ini dipakai Google untuk mengecek sisa quata harian anda. Limit dari Google Map API adalah 25000 hit perhari.
4.  Jika anda mendapat script Google map dari tutorial lama konversi script itu menjadi fungsi dengan nama initMap() karena itu fungsi pertama yang dipanggil. Perhatikan di bagian https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap.
5. Jika anda mendapatkan error, biasakan mencari solusinya dengan mengkopas pesan error yang muncul, biasanya anda akan dibawa ke stackoverflow dan cari solusi dengan TANDA CENTANG. insyaAllah itu solusi yang benar.
6. Belajar bahasa inggris, jangan cuma mengandalkan tutorial bahasa indonesia.