Hallo sobat mitra tekno niaga, tulisan kali ini Kami ingin memberikan tutorial sederhana tentang bagaimana cara menampilkan peta Google Maps pada website dengan API bawaan dari Google Maps. Tau kah Kamu? Google sudah sangat mempermudah kita dalam menggunakan teknologi milik mereka. Oke, langsung saja ya.
Untuk memulai ini, Anda harus membuat API KEY terlebih dahulu pada link berikut ini: https://console.cloud.google.com/apis/credentials
Sebelum lanjut akan Kami jelaskan terlebih dahulu, apa sih API KEY? apa fungsingnya?
Secara singkat API KEY adalah sebuah kunci yang gunakan untuk otorisasi dalam mengakses API Google, pada kasus kali ini adalah API Google Maps. Mari kita buat analogi sederhana, anggaplah API Google adalah sebuah rumah yang di jaga dengan keamanan yang sangat ketat, agar bisa masuk ke rumah tersebut kita harus mempunyai kuncinya. Nah, API KEY inilah kuncinya. Paham kan?
Baca Juga: Konfigurasi untuk Membuat Koneksi PHP ke SQL Server dengan Driver MSSQL
Untuk menampilkan peta dengan API Google Map, kita cukup menggunakan 2 blok kode JavaScript dan kode HTML sederhana. Lihat script di bawah ini:
Blok JavaScript pertama:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>Fungsi script yang pertama ini adalah untuk memanggil API Google Map menggunakan API KEY yang sudah kita buat sebelumnya. Jika Anda sudah memiliki API KEY, replace "YOUR_API_KEY" dengan API KEY yang sudah Anda buat.
Blok JavaScript kedua:
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('show_maps'), {
center: {lat: -1.035721, lng: 118.436931},
zoom: 5
});
}
</script>Fungsi script yang kedua ini adalah untuk menampilkan peta dari API Google Maps, peta di tampilkan pada element HTML.
Untuk melakukan testing sudah Kami sertakan full source code-nya dibawah ini, Anda cukup copy paste script tersebut di komputer Anda masing-masing dan jangan lupa replace "YOUR_API_KEY" dengan API KEY milik Anda.
<html>
<head>
<title> Google Maps API: Cara Menampilkan Peta pada Website </title>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
<script type="text/javascript">
function initMap() {
var map = new google.maps.Map(document.getElementById('show_maps'), {
center: {lat: -1.035721, lng: 118.436931},
zoom: 5
});
}
</script>
</head>
<body>
<div id="show_maps" style="width:100%;height:100%;"></div>
</body>
</html> Outputnya seperti gambar dibawah ini:
Demikian pembahasan tentang Google Maps API: Cara Menampilkan Peta pada Website, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
