Cara Menampilkan Google Map pada halaman Web ~ Belajar Bahasa Pemrograman

Cara Menampilkan Google Map pada halaman Web - Hai, sudah lama saya tidak melakukan postingan, dikarenakan kesibukan sehari-hari. Tapi pada postingan kali ini, saya akan mencoba membahas google map. Mungkin teman-teman sekalian pernah membuat web pribadi atau orang lain. Tetapi ingin menampilkan sebuah lokasi, baik itu lokasi tempat bisnis dari web yang anda buat atau lokasi lainnya. Postingan ini merupakan hal yang dasar pada google map.

Oke, sebelum melakukan kodingannya, hal yang dibutuhkan pertama ialah API Key yang kita dapat dari google developer.

Membuat API Key

Untuk mendapatkan API Keynya anda dapat mengaksesnya melalui Maps Javascript API. Pada sebelah kanan atas, ada tombol "Get A Key". Klik tombol tersebut, maka akan muncul sebuah pop up, dimana anda disarankan membuat project baru. Perhatikan gambar dibawah ini.

Cara Menampilkan Google Map pada halaman Web

Sampai disini anda sudah mendapatkan API Keynya yang dapat kita gunakan ke langkah selanjutnya yaitu kodingannya. Berikut seluruh script yang digunakan:

<!DOCTYPE html>
<html>
<head>
 <title>Belajar Membuat Map</title>
 <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
</head>
<body>

 <h3>Contoh Map Pada Website</h3>
 <div id="map"></div>

<script>
 function initMap() {
  var location = {lat:3.565186, lng: 98.655978};
  var map = new google.maps.Map(document.getElementById('map'), {
   zoom: 15,
   center: location
  });

  var marker = new google.maps.Marker({
   position: location,
   map: map
  });
 }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=CopasAPIKeyAndaDisini&callback=initMap"></script>
</body>
</html>

Pada kode diatas simpan dengan nama map_demo1.html lalu jalankan pada web server anda. Maka hasilnya akan seperti gambar dibawah ini:

Pembahasan

Pada kode diatas yang sudah kita buat, akan dibahas dulu sedikit demi sedikit. Pada baris 19 merupakan latitude dan longitude dari lokasi yang kita inginkan. Bagaimana mencari latitude dan longitude nya.? Anda dapat menggunakan fasilitas di google map. Dan mencari lokasi yang anda inginkan, lalu klik kanan lokasi tersebut dan pilih 'what's here.?'. Maka dibagian bawah akan muncul deskripsi dari lokasi tersebut beserta latitude dan longitudenya. (Sumber: support Google).

Pada baris 21 merupakan level dari zoom pada map yang akan dibuat. Pada level ini memiliki makna tersendiri. Contoh misalnya saya buat 15, berarti saya menampilkan pada bagian jalan-jalan saja. (Baca selengkapnya)

Pada baris lainnya, saya anggap, teman-teman sudah pada paham ya. Sampai disini lah dulu tutorial Cara Menampilkan Google Map pada Halaman Web semoga dapat bermanfaat. Tutorial ini memiliki banyak kekurangan, dan saya mohon maaf bila ada kesalahan. Trima kasih.