rachmat

Current Date:27 May, 2020

Google Maps API: Cara Menampilkan Peta pada Website

Google Maps adalah layanan pemetaan web yang dikembangkan oleh Google. Layanan ini memberikan citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda motor, sepeda atau angkutan umum.
5
(21)

Hallo sobat, tulisan kali ini Saya 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 Saya 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 Saya 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:

Google Maps API: Cara Menampilkan Peta pada Website

Demikian pembahasan tentang Google Maps API: Cara Menampilkan Peta pada Website, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 5/5 dari 21 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

Leave a Reply

Your email address will not be published. Required fields are marked *