CandraLab

Google Map API adalah salah satu API yang paling banyak dipakai didunia. Walaupun demikian, fitur yang dipakai oleh kebanyakan developer baru fitur dasarnya saja. Fitur Lanjut API ini jarang di expose, apalagi di explore.

Sebelum membahas Rincian API nya, Google maps API sendiri terbagi menjadi 4 Platform yaitu Android, iOS, Web dan Webservice. Untuk Webservice sendiri merupakan layanan yang sifatnya Platform netral karena output dari webservice adalah JSON. Artinya kita bisa membangun aplikasi mobile, web,desktop bahkan embeded system (Seperti GPS tracker di mobil) dengan Google Map API Webservice.

Untuk memudahkan pembahasan, saya akan jelaskan perplatfrom dan kapan anda memakai API ini dan

Google Maps API For Android

Google Maps Android API

https://developers.google.com/maps/documentation/android-api/

Api ini dipakai untuk aplikasi yang menampilkan peta seperti GIS di Android. Fitur yang disediakan adalah 3D Building, Custom Marker, Custom Map, Integrasi dengan webservice pihak ketiga dan sebagainya. Intinya jika anda ingin membuat aplikasi GIS seperti peta masjid atau sebaran penduduk di Suatu daerah, maka inilah APInya. Bahasa yang dipakai adalah JAVA.

Google Place API for Android

https://developers.google.com/places/android-api/

Digunakan untuk aplikasi yang membutuhkan fitur mendeteksi lokasi disekitar user di Android dengan bahas JAVA. Misalkan daftar restoran terdekat atau pom bensin terdekat. Sangat cocok di implementasikan untuk aplikasi Tour and Travel, booking hotel, rumah makan atau sekedar Explore suatu kota.

Google Maps API for iOS

API disini digunakan untuk membuat Aplikasi iPad atau iPhone.

Google Maps SDK for iOS

https://developers.google.com/maps/documentation/ios-sdk/

Sama dengan Google Maps Android API cuma API ini untuk Platform Apple. Bahasa yang digunakan adalah Objective-C.

Google Place API for iOS

https://developers.google.com/places/ios-api/

Sama dengan Place API for Android, hanya saja API inid untuk Platform Apple. Bahasa yang digunakan adalah Objective-C.

Google Maps API for Web

Semua kumpulan API ini digunakan untuk membuat aplikasi WEB Semacam GIS dengan bahasa Javascript dan HTML. API untuk web ini bisa anda baca dokumentasinya di https://developers.google.com/maps/web/.

API untuk web ini terbagi menjadi :

Google Map Javascript API, digunakan untuk menampilkan Peta di webApp atau website kita dengan custom UI, Marker, Infowindows dan integrasi dengan data kita sendiri.
Google Maps Embeded API digunakan untuk menampilkan peta suatu lokasi tanpa menggunakan bahasa pemrograman, mudahnya ini sama saja menempelken Peta Google di website kita secara interaktif.
Google Street View Image API digunakan untuk menampilkan lokasi jalan dari StreetView. Ini juga sifatnya interaktif, cocok untuk menampilkan lokasi dengan sudut pandang 360 derajat.
Google Static Maps API digunakan untuk menampilkan Peta Static sebuah lokasi. API ini mirip dengan Embeded API, perbedaan mendasarnya, petanya tidak interaktif. (sudah dalam format Gambar).
Google Place Javascript API, digunakan untuk melisting lokasi point of interest seperti hotel, restoran atau lokasi lokasi lain yangterdata di Google map, API ini sama fungsinya dengan Google Place Android API dan Google Place API for IOS.

Google Maps Webservice API

API ini merupakan layanan yang outputnya berupa JSON. Artinya sembarang bahasa pemrograman atau platform bisa mengaksesnya. Webservice fokus memberikan data dan yang memformat outputnya diserahkan ke programernya. JIka anda ingin membuat aplikasi Canggih berbasis Google Maps maka wajib di pelajari di https://developers.google.com/maps/web-services/.

Berikut ini adalah komponennya:

Google Maps GeoCoding API berfungsi untuk mengkonversi koordinat menjadi alamat jalan dan mengkonversi alamat jalan atau lokasi menjadi koordinat (reverse GeoCoding).
Google Place Webservice API fungsinya sama dengan Google Place API di 3 platform sebelumnya hanya saja webservice ini lebih luas pemakaiannya dan tidak dibatasi oleh bahasa pemrograman java, Objective-C atau javascript. Intinya segala bahasa yang bisa memproses JSON bisa mengaksesnya.
Google Maps Elevation API fungsinya menampilkan ketinggian suatu lokasi dari atas permukaan laut. Misalkan kota Yogyakarta ketinggian dari permukaan laut 10 Meter, sedangkan jika lokasi koordinatnya adalah puncak gunung merapi, ketinggiannya 3000 Meter.
Google Maps Road API, fungsinya sangat spesifik, yaitu memastikan Programer GPS tracker menampilkan log perjalanan persis di jalan yang dilalui. Biasanya dipakai perusahaan GPS tracking atau asset Tracking.
Google Map GeoLocation API, API ini sangat canggih, bisa mendeteksi lokasi user walaupun GPS di smartphone dimatikan. GeoLocation API memanfaatkan Cell Tower dan sinyal wifi untuk mendeteksi lokasi user. Artinya device yang tidak punya GPS pun bisa dideteksi lokasinya walaupun tidak seakurat sensor GPS. NGeri kan?
Google Maps Direction API. Dipakai untuk menunjukan jalur perjalanan dari lokasi A ke lokasi B. Biasanya lokasi A adalah lokasi User saat ini dan lokasi adalah Point of interest yang dituju.
Google Maps Timezone API, API ini dgunakan untuk mendeteksi Timezone suatu koordinat/lokasi. Misalkan input Jakarta, maka timezone GMT+7. Sangat bermanfaat untuk membandingkan lokasi asal user dan lokasi user saat ini. Cocok untuk aplikasi traveling. Contoh kasusnya, misalkan ada event besar semisal Rio Olympic dan pertandingan olahraganya jam 10 AM waktu setempat. Terus jam berapa event itu di lokasi kita saat ini.
Google Maps Distance Matrix API, sesuai namanya API ini cocok untuk mengkalkulasi jarak dan waktu tempuh kesebuah lokasi. API ini masih berhubungan dnegan Direction API.

Nah, ternyata Maps API sangat luas kan? tutorial pemrograman Google Maps yang saya tulis disini baru sebagian kecil dari API yagn disebutkan diatas, jadi jangan cepat puas dalam belajar. Semoga artikel ini bisa memotivasi pembaca agar lebih memperdalam kemampuan pemrograman google mapnya. Happy Coding!

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-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

<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!