Cara Mudah Membuat Website Maps Sendiri

Share:

Hello World! Jaman sekarang sudah serba maju, semua bisa jadi mudah. Mau makan mudah, pesen lewat jasa transportasi online, mau shopping mudah, tinggal buka aplikasinya di handphone. Termasuk juga ketika mau pergi tetapi nggak hafal jalan. Dulu kalau gini sih, agak takut juga buat pergi, takut kesasar. Tapi sekarang, tinggal buka hp aja udah tau jalan, yaitu dengan menggunakan Google Maps.

Berkat kehadiran Google Maps kita bisa kemana saja tanpa takut nyasar. Ya, walaupun banyak kekurangannya, seperti kadang-kadang masuk ke sawah / sungai, tapi sedikit banyak kita terbantu oleh Google saat melakukan perjalanan. Ngomong-ngomong, Google Maps itu keren ya? Pasti sulit bikin website kayak gitu? Enggak kok, membuat website seperti Google Maps itu mudah dilakukan, bahkan oleh programmer awam sekalipun. Untuk membuatnya, kita hanya memerlukan kemampuan dalam HTML dan sedikit JavaScript. Loh? Kok cuma itu? Ya, untuk membuatnya kita hanya menggunakan API yang sudah disediakan oleh Google.

Sedikit ilmu, Apa sih itu API? API (singkatan dari Application Programming Interface) adalah sekumpulan perintah, fungsi, dan protokol yang bisa dipakai oleh programmer ketika membuat sebuah software (desktop, mobile, mauapun web based) dan merupakan fungsi standar untuk berinteraksi dengan aplikasi lain. Salah satu-nya adalah Google Maps API. Jadi, dengan menggunakan API GMaps ini kita bisa membuat website peta dan tampilannya akan sama seperti website peta lain yang sama-sama menggunakan API ini.

Langsung saja kita mencoba membuat website maps sendiri

1. Menuju ke Google API Console
2. Klik "Buat Proyek" pada dropdown di sebelah kanan Logo Google API. Setelah itu, masukkan nama proyek Anda, klik "BUAT"
3. Setelah itu, Anda akan langsung redirect ke laman Pustaka API, lihat bagian API Google Maps, dan klik Google Maps JavaScript API

4. Setelah diklik, Anda akan diberik sedikit review tentang Google Maps JavaScript API. Tak perlu dibaca semua, klik "AKTIFKAN"
5. API Anda telah aktif. Untuk menggunakannya, Anda perlu membuat kredensial. Klik tombol "Buat kredensial". Di halaman pembuatan kredensial, klik tombol "Kredensial apa yang saya butuhkan?". Lalu, salin kunci kredensial yang akan dipaste-kan pada web Anda nantinya. Klik tombol "Selesai".


6. Buatlah sebuah file HTML dengan nama peta.html dan masukkan script di bawah ini
<!DOCTYPE html>
<html>
<head>
       <title>Peta Saya</title>
       <style>
              #map { height:100%; }
       </style>
</head>
<body>
       <div id="map"></div>
       <script type="text/javascript">
       var map;
       function initMap() {
              map = new google.maps.Map(document.getElementById('map'), {
                     center: {lat: -34.397, lng: 150.644},
                     zoom: 8
              };
       }
       </script>
       <script async defer src="https://maps.googleapis.com/maps/api/js?key=[KODE API ANDA]&callback=initMap">
       </script>
</body>  
</html>

Keterangan :
- [KODE API ANDA] diganti dengan Kode Kredensial Anda yang sudah disalin sebelumnya
- lat & lng : merupakan koordinat lokasi pertama kali membuka / merefresh halaman

7. Simpan dan buka

Maps telah dibuat. Mudah bukan? Dengan bantuan API Google kita bisa membuat website peta dengan sangat mudah, hanya membutuhkan HTML dan sedikit JavaScript saja. Untuk hasil tampilannya tidak ada bedanya dengan laman Google Maps yang asli. Salam Koding!

Tambahan :

Cara Mengatasi "This Page Didn't Load Google Maps Correctly"

Sering kali muncil masalah seperti ini, laman Peta Anda tidak dapat di-load dengan benar. Untuk mengatasinya hanyalah mengecek apakah kunci kredensial Anda sudah benar atau tidak? Karena kebanyakan kesalahan disini adalah salahnya kunci kredensial atau bahkan lupa menulisnya. Untuk mendapatkan kunci kredensial API, Anda dapat membuka laman Google API Console.

Tidak ada komentar