100% Gratis & Berhasil, Cara Tampilkan Peta Google di Blog

Beberapa situs web memerlukan Google Maps, dengan menampilkan Google Maps di situs web akan memudahkan para pelanggan menemukan lokasi bisnis bersangkutan. Untuk menampilkan Google Maps di HTML memerlukan beberapa hal karena berhubungan dengan pihak ketiga “Google“.

Google Maps HTML

Salin kode berikut dan terapkan di tempat dimana ingin menampilkan Google Maps:

<div id="googleMaps" style="width:100%;height:400px;"></div>

Sesuaikan width dan height sesuai kebutuhan website, selanjutnya salin kode berikut dan letakkan dibawahnya:

<script>
        function myMap() {
        var mapProp= {
            center:new google.maps.LatLng(-6.9277361,106.9299579),
            zoom:3,
        };
        var map=new google.maps.Map(document.getElementById("googleMaps"),mapProp);
        }
</script>

Tentukan sendiri Latitude dan Logitude sesuai lokasi mana yang ingin ditampilkan secara default pada peta, untuk mengubahnya bisa edit bagian google.maps.LatLng(-6.9277361,106.9299579). Ubah angka didalam kurung dengan Latitude dan Logitude yang diharapkan.

Jika ingin mengatur jarak keterlihatan peta, aturlah di bagian zoom:3;. Ketika diatur semakin besar angka zoom nya maka peta yang ditampilkan akan semakin dekat secara default (walaupun nantinya dapat di zoom-in dan zoom-out oleh pengunjung). Sebaliknya, jika semakin kecil angka zoom maka secara default peta yang ditampilkan akan lebih jauh.

Google Maps API Key

Langkah berikutnya adalah mendapatkan / membuat Google Maps API Key.

• Kunjungi Console Cloud Google
• Login dengan akun Google manapun
• Buatlah sebuah Project (biasanya ketika baru login akan diminta membuat project terlebih dahulu, jika tidak diminta silahkan buat dengan cara berikut)
• Klik menu tarik turun dibagian navigasi bar
• Ketika muncul layar popup, pilih Project Baru (jika menggunakan bahasa Indonesia)

• Selesaikan pembuatan project dalam beberapa langkah hingga selesai, akan dikembalikan ke halamam beranda. Lanjutkan step dibawah

Catatan: Jika sudah memiliki project sebelumnya, sebaiknya tidak perlu membuat project baru tapi cukup pilih project tersebut di navigasi bar kemudian lanjutkan langkah dibawah

• Pada menu di samping kiri (klik toggle menu untuk menampilkannya). Pilih menu API & Layanan > Pustaka
• Pilih Maps Javascript API

• Akan diarahkan ke halaman detail Maps Javascript API
• Klik tombol Aktifkan untuk mengaktifkan API ini

 

• Akan diarahkan ke Ringkasan API tersebut, ini adalah dasbor dimana kamu dapat melihat metrik dan statistik mengenai API ini (mungkin masih kosong karena belum digunakan)
• Pada menu samping kiri, pilih API & Layanan > Kredensial
• Klik tombol Buat Kredensial, pilih Kunci API

• Secara otomatis akan menghasilkan Kunci API / API Key seperti pada gambar ini, salin kode yang ditandai dan simpan di tempat yang aman (atau nanti saja)

Setelah pembuatan kunci API selesai, sekarang saatnya membuat Google Maps tampil di website. Salin kode berikut dan tempelkan dibagian sebelum penutup </body>: <script src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=myMap"></script>

Perhatikan didalam script berikut terdapat tulisan API-KEY, ubahlah dengan kunci API yang tadi baru saja dibuat maka akan terlihat seperti ini: <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjLd-8LnIEyCvcP1wS0jIV30VbvIMAZd4&callback=myMap"></script>(ini hanya contoh saja, gunakan kunci API-mu sendiri !!)

Masih bingung ? Lihat : Video tutorial cara embed Google Maps di HTML CSS.

Simpan, dan lihat hasilnya ! Dengan langkah mudah ini, sekarang situs web kamu dapat menampilkan Peta Google secara gratis tanpa perlu berlangganan (berbayar) apapun.

Selamat mencoba !