Google Maps - Memulai

Apakah Google Maps itu?

Google Maps adalah layanan pemetaan web gratis dari Google yang menyediakan berbagai jenis informasi geografis. Menggunakan Google Maps, seseorang bisa.

Telusuri tempat atau dapatkan petunjuk arah dari satu tempat ke tempat lain.
Lihat dan navigasi melalui gambar tingkat jalan panorama horizontal dan vertikal dari berbagai kota di seluruh dunia.
Dapatkan informasi spesifik seperti lalu lintas pada titik tertentu.

Google Maps menyediakan API yang dapat digunakan untuk menyesuaikan peta dan informasi yang ditampilkan di dalamnya. Bab ini menjelaskan cara memuat Peta Google sederhana pada halaman web Anda menggunakan HTML dan JavaScript.

Langkah-langkah untuk Memuat Peta di Halaman Web

Ikuti langkah-langkah yang diberikan di bawah ini untuk memuat peta di halaman web Anda -

Langkah 1: Buat Halaman HTML

Buat halaman HTML dasar dengan tag kepala dan badan seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Langkah 2: Muat API

Muat atau sertakan Google Maps API menggunakan tag script seperti yang ditunjukkan di bawah ini -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Langkah 3: Buat Penampung

Untuk menyimpan peta, kita harus membuat elemen kontainer, umumnya tag <div> (wadah umum) digunakan untuk tujuan ini. Buat elemen kontainer dan tentukan dimensinya seperti yang ditunjukkan di bawah ini -

<div id = "sample" style = "width:900px; height:580px;"></div>

Langkah 4: Opsi Peta

Sebelum menginisialisasi peta, kita harus membuat mapOptionsobjek (dibuat seperti literal) dan nilai set untuk variabel inisialisasi peta. Peta memiliki tiga pilihan utama, yaitu,centre, zoom, dan maptypeid.

centre- Di bawah properti ini, kita harus menentukan lokasi di mana kita ingin memusatkan peta. Untuk melewati lokasi, kita harus membuat fileLatLng objek dengan meneruskan garis lintang dan bujur dari lokasi yang diperlukan ke konstruktor.
zoom - Di bawah properti ini, kita harus menentukan tingkat zoom peta.
maptypeid- Di bawah properti ini, kita harus menentukan tipe peta yang kita inginkan. Berikut adalah jenis peta yang disediakan oleh Google -
- ROADMAP (normal, peta 2D default)
- SATELIT (peta fotografi)
- HYBRID (kombinasi dari dua atau lebih jenis lainnya)
- TERRAIN (peta dengan gunung, sungai, dll.)

Dalam suatu fungsi, katakanlah, loadMap(), buat objek mapOptions dan setel nilai yang diperlukan untuk center, zoom, dan mapTypeId seperti yang ditunjukkan di bawah ini.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Langkah 5: Buat Objek Peta

Anda dapat membuat peta dengan membuat instance kelas JavaScript yang disebut Map. Saat membuat instance kelas ini, Anda harus meneruskan wadah HTML untuk menampung peta dan opsi peta untuk peta yang diperlukan. Buat objek peta seperti yang ditunjukkan di bawah ini.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Langkah 6: muat peta

Terakhir, muat peta dengan memanggil metode loadMap () atau dengan menambahkan listener DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Contoh

Contoh berikut menunjukkan cara memuat peta jalan kota bernama Vishakhapatnam dengan nilai zoom 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan output berikut -