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
<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
- Login ke Google Api Console Dengan Akun Gmail Anda.
- Create Project sebagai contoh “GoogleMapWeb”
- Klik menu Library lalu klik link Google Map Javascript API
- Klik Enable Seperti gambar dibawah ini
- Selanjutnya Klik tombol biru Go to Credentials
- Proses selanjutnya adalah proses Membuat Apikey dengan 3 langkah
- 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
<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
- Selalu mengacu ke https://developers.google.com/maps/ untuk referensi Google Map API.
- 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.
- 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.
- 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.
- 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.
- Belajar bahasa inggris, jangan cuma mengandalkan tutorial bahasa indonesia.
Semoga Panduan singkat diatas bermanfaat dan menjadi jawaban saya terhadap banyaknya pertanyaan seputar Google Map yang tidak berjalan sebagaimana mestinya. Happy Coding!
Gan, API google map harus bayar ya jika Map ingin muncul tanpa tulisan for development purpose only?
Mas boleh tahu, dimana harus diletakkan kod program itu pada website situsnya?
Mas boleh tahu, dimana harus diletakkan kod program itu pada website situsnya?
Terimakasih Mas Chandra
sangat membantu, salam hangat Anca WAMIKA AKAKOM
Ditunggu undangan walimahannya ya…
Terimakasih atas pencerahannya,
Informasi sangat membantu.
terima kasih, sangat membantu
Hjk