Google Maps - Panduan Cepat

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 penampung HTML untuk menyimpan 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 keluaran berikut -

Pada bab sebelumnya, kita telah membahas bagaimana memuat peta dasar. Di sini, kita akan melihat bagaimana memilih tipe peta yang dibutuhkan.

Jenis Peta

Google Maps menyediakan empat jenis peta. Mereka adalah -

  • ROADMAP- Ini adalah tipe default. Jika Anda belum memilih jenis apa pun, ini akan ditampilkan. Ini menunjukkan tampilan jalan dari wilayah yang dipilih.

  • SATELLITE - Ini adalah tipe peta yang menampilkan citra satelit dari wilayah yang dipilih.

  • HYBRID - Jenis peta ini menunjukkan jalan-jalan utama pada citra satelit.

  • TERRAIN - Ini adalah tipe peta yang menunjukkan medan dan vegetasi

Sintaksis

Untuk memilih salah satu tipe peta ini, Anda harus menyebutkan id tipe peta masing-masing dalam opsi peta seperti yang ditunjukkan di bawah ini -

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

Peta jalan

Contoh berikut menunjukkan cara memilih peta tipe ROADMAP -

<!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:9,
               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 akan menghasilkan keluaran sebagai berikut -

Satelit

Contoh berikut menunjukkan bagaimana memilih peta tipe SATELIT -

<!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:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            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 akan menghasilkan keluaran sebagai berikut -

Hibrida

Contoh berikut menunjukkan cara memilih peta tipe HYBRID -

<!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:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            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 akan menghasilkan keluaran sebagai berikut -

Medan

Contoh berikut menunjukkan cara memilih peta tipe TERRAIN -

<!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:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            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 akan menghasilkan keluaran sebagai berikut -

Naikkan / Turunkan Nilai Zoom

Anda dapat menambah atau mengurangi nilai zoom peta dengan mengubah nilai zoom atribut dalam opsi peta.

Sintaksis

Kita dapat menambah atau mengurangi nilai zoom peta menggunakan opsi zoom. Diberikan di bawah ini adalah sintaks untuk mengubah nilai zoom dari peta saat ini.

var mapOptions = {
   zoom:required zoom value
};

Contoh: Zoom 6

Kode berikut akan menampilkan peta jalan kota Vishakhapatnam dengan nilai zoom 6.

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Contoh: Zoom 10

Kode berikut akan menampilkan peta jalan kota Vishakhapatnam dengan nilai zoom 10.

<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Secara default, nama kota dan nama opsi yang diberikan pada peta akan menggunakan bahasa Inggris. Jika diperlukan, kami juga dapat menampilkan informasi tersebut dalam bahasa lain. Proses ini dikenal sebagailocalization. Dalam bab ini, kita akan mempelajari cara melokalkan peta.

Melokalkan Peta

Anda dapat menyesuaikan (melokalkan) bahasa peta dengan menentukan opsi bahasa di URL seperti yang ditunjukkan di bawah ini.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Contoh

Berikut adalah contoh yang menunjukkan cara melokalkan GoogleMaps. Di sini Anda dapat melihat peta jalan China yang dilokalkan ke bahasa China.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Keluaran

Ini akan menghasilkan keluaran sebagai berikut -

Google Maps menyediakan Antarmuka Pengguna dengan berbagai kontrol untuk memungkinkan pengguna berinteraksi dengan peta. Kami dapat menambahkan, menyesuaikan, dan menonaktifkan kontrol ini.

Kontrol Default

Berikut adalah daftar kontrol default yang disediakan oleh Google Maps -

  • Zoom- Untuk menambah dan mengurangi tingkat zoom peta, kami akan memiliki slider dengan tombol + dan -, secara default. Slider ini akan berada di pojok sisi kiri peta.

  • Pan - Tepat di atas penggeser zoom, akan ada kontrol pan untuk menggeser peta.

  • Map Type- Anda dapat menemukan kontrol ini di pojok kanan atas peta. Ini menyediakan opsi tipe peta seperti Satelit, Peta Jalan, dan Medan. Pengguna dapat memilih salah satu dari peta ini.

  • Street view- Di antara ikon pan dan penggeser zoom, kami memiliki ikon Pegman. Pengguna dapat menyeret ikon ini dan menempatkannya di lokasi tertentu untuk mendapatkan tampilan jalannya.

Contoh

Berikut adalah contoh di mana Anda dapat mengamati kontrol UI default yang disediakan oleh Google Maps -

Menonaktifkan Kontrol Default UI

Kita dapat menonaktifkan kontrol UI default yang disediakan oleh Google Maps hanya dengan membuat disableDefaultUI nilai true dalam opsi peta.

Contoh

Contoh berikut menunjukkan cara menonaktifkan kontrol UI default yang disediakan oleh Google Maps.

<!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:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Ini akan menghasilkan keluaran sebagai berikut -

Mengaktifkan / Menonaktifkan Semua Kontrol

Selain kontrol default ini, Google Maps juga menyediakan tiga kontrol lagi seperti yang tercantum di bawah ini.

  • Scale- Kontrol Skala menampilkan elemen skala peta. Kontrol ini tidak diaktifkan secara default.

  • Rotate- Kontrol Putar berisi ikon lingkaran kecil yang memungkinkan Anda memutar peta yang berisi citra miring. Kontrol ini muncul secara default di sudut kiri atas peta. (Lihat Citra 45 ° untuk informasi lebih lanjut.)

  • Overview- Untuk menambah dan mengurangi tingkat zoom peta, kami memiliki slider dengan tombol + dan -, secara default. Slider ini terletak di pojok kiri peta.

Di opsi peta, kami dapat mengaktifkan dan menonaktifkan kontrol apa pun yang disediakan oleh Google Maps seperti yang ditunjukkan di bawah ini -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Contoh

Kode berikut menunjukkan cara mengaktifkan semua kontrol -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Ini akan menghasilkan keluaran sebagai berikut -

Opsi Kontrol

Kita dapat mengubah tampilan kontrol Google Maps menggunakan opsi kontrolnya. Misalnya, kontrol zoom dapat diperkecil atau diperbesar ukurannya. Tampilan kontrol MapType dapat bervariasi menjadi bilah horizontal atau menu tarik-turun. Diberikan di bawah ini adalah daftar opsi Kontrol untuk Zoom dan kontrol MapType.

Sr.No. Nama Kontrol Opsi Kontrol
1 Kontrol zoom
  • google.maps.ZoomControlStyle.SMALL
  • google.maps.ZoomControlStyle.LARGE
  • google.maps.ZoomControlStyle.DEFAULT
2 Kontrol MapType
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU
  • google.maps.MapTypeControlStyle.DEFAULT

Contoh

Contoh berikut menunjukkan cara menggunakan opsi kontrol -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Kontrol Positioning

Anda dapat mengubah posisi kontrol dengan menambahkan baris berikut dalam opsi kontrol.

position:google.maps.ControlPosition.Desired_Position,

Berikut adalah daftar posisi yang tersedia di mana kontrol dapat ditempatkan pada peta -

  • TOP_CENTER
  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_TOP
  • LEFT_CENTER
  • RIGHT_CENTER
  • LEFT_BOTTOM
  • RIGHT_BOTTOM
  • BOTTOM_CENTER
  • BOTTOM_LEFT
  • BOTTOM_RIGHT

Contoh

Contoh berikut menunjukkan bagaimana menempatkan kontrol MapTypeid di tengah atas peta dan bagaimana menempatkan kontrol zoom di tengah bawah peta.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Kita dapat menggambar objek pada peta dan mengikatnya ke garis lintang dan bujur yang diinginkan. Ini disebut overlay. Google Maps menyediakan berbagai overlay seperti yang ditunjukkan di bawah ini.

  • Markers
  • Polylines
  • Polygons
  • Lingkaran dan persegi panjang
  • Jendela info
  • Symbols

Untuk menandai satu lokasi di peta, Google Maps menyediakan markers. Penanda ini menggunakan simbol standar dan simbol ini dapat disesuaikan. Bab ini menjelaskan cara menambahkan penanda, dan cara menyesuaikan, menghidupkan, dan menghapusnya.

Menambahkan Penanda Sederhana

Anda dapat menambahkan penanda sederhana ke peta di lokasi yang diinginkan dengan membuat instance kelas penanda dan menentukan posisi yang akan ditandai menggunakan latlng, seperti yang ditunjukkan di bawah ini.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Contoh

Kode berikut menetapkan penanda di kota Hyderabad (India).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Menganimasikan Marker

Setelah menambahkan penanda ke peta, Anda dapat melangkah lebih jauh dan menambahkan animasi ke dalamnya seperti bounce dan drop. Potongan kode berikut menunjukkan bagaimana menambahkan animasi bouncing dan drop ke marker.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Contoh

Kode berikut menetapkan penanda di kota Hyderabad dengan efek animasi tambahan -

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Menyesuaikan Marker

Anda dapat menggunakan ikon Anda sendiri alih-alih ikon default yang disediakan oleh Google Maps. Cukup atur ikon sebagaiicon:'ICON PATH'. Dan Anda dapat membuat ikon ini dapat diseret dengan mengaturdraggable:true.

Contoh

Contoh berikut menunjukkan cara menyesuaikan penanda ke ikon yang diinginkan -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Menghapus Marker

Anda dapat menghapus penanda yang ada dengan menyiapkan penanda menjadi null menggunakan marker.setMap() metode.

Contoh

Contoh berikut menunjukkan cara menghapus penanda dari peta -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Pada bab sebelumnya, kita telah mempelajari cara menggunakan penanda di Google Maps. Bersama dengan marker, kita juga dapat menambahkan berbagai bentuk seperti lingkaran, poligon, persegi panjang, polylines, dll. Bab ini menjelaskan cara menggunakan bentuk yang disediakan oleh Google Maps.

Polyline

Polyline, disediakan oleh Google Maps, berguna untuk melacak jalur yang berbeda. Anda dapat menambahkan polyline ke peta dengan membuat instance kelasgoogle.maps.Polyline. Saat membuat instance kelas ini, kita harus menentukan nilai yang diperlukan dari properti polyline seperti StrokeColor, StokeOpacity, dan strokeWeight.

Kita bisa menambahkan polyline ke peta dengan meneruskan objeknya ke metode setMap(MapObject). Kita bisa menghapus polyline dengan meneruskan nilai null ke metode SetMap ().

Contoh

Contoh berikut menunjukkan polyline yang menyorot jalur antara kota Delhi, London, New York, dan Beijing.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Poligon

Poligon digunakan untuk menyorot area geografis tertentu dari suatu negara bagian atau negara. Anda dapat membuat poligon yang diinginkan dengan membuat instance kelasgoogle.maps.Polygon. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti Polygon seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, dll.

Contoh

Contoh berikut menunjukkan cara menggambar poligon untuk menyorot kota Hyderabad, Nagpur, dan Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Persegi panjang

Kita dapat menggunakan persegi panjang untuk menyorot area geografis suatu wilayah atau negara bagian tertentu dengan menggunakan kotak persegi panjang. Kita bisa memiliki persegi panjang pada peta dengan membuat instance kelasgoogle.maps.Rectangle. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti persegi panjang seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, dll.

Contoh

Contoh berikut menunjukkan cara menyorot area tertentu pada peta menggunakan persegi panjang -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Ini memberi Anda output berikut -

Lingkaran

Sama seperti persegi panjang, kita dapat menggunakan Lingkaran untuk menyorot area geografis suatu wilayah atau negara bagian tertentu menggunakan lingkaran dengan membuat instance kelas google.maps.Circle. Saat membuat instance, kita harus menentukan nilai yang diinginkan ke properti lingkaran seperti path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, dll.

Contoh

Contoh berikut menunjukkan cara menyorot area di sekitar New Delhi menggunakan lingkaran -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Selain marker, poligon, polylines, dan bentuk geometris lainnya, kita juga dapat menggambar Jendela Info pada peta. Bab ini menjelaskan cara menggunakan Jendela Info.

Menambahkan Jendela

Jendela Info digunakan untuk menambahkan segala jenis informasi ke peta. Misalnya, jika Anda ingin memberikan informasi tentang suatu lokasi di peta, Anda dapat menggunakan jendela info. Biasanya jendela info dilampirkan ke penanda. Anda dapat melampirkan jendela info dengan membuat instancegoogle.maps.InfoWindowkelas. Ini memiliki properti berikut -

  • Content - Anda dapat mengirimkan konten Anda dalam format String menggunakan opsi ini.

  • position - Anda dapat memilih posisi jendela info menggunakan opsi ini.

  • maxWidth- Secara default, lebar jendela info akan direntangkan hingga teks dibungkus. Dengan menentukan maxWidth, kita dapat membatasi ukuran jendela info secara horizontal.

Contoh

Contoh berikut menunjukkan cara menyetel marker dan menentukan jendela info di atasnya -

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini akan menghasilkan keluaran sebagai berikut -

Selain marker, poligon, polylines, dan bentuk geometris lainnya, kita juga dapat menambahkan gambar vektor (simbol) yang telah ditentukan sebelumnya pada peta. Bab ini menjelaskan cara menggunakan simbol yang disediakan oleh Google Maps.

Menambahkan Simbol

Google menyediakan berbagai gambar (simbol) berbasis vektor yang dapat digunakan pada marker atau polyline. Sama seperti overlay lainnya, untuk menggambar simbol yang telah ditentukan ini di peta, kita harus membuat instance kelasnya masing-masing. Diberikan di bawah ini adalah daftar simbol yang telah ditentukan sebelumnya yang disediakan oleh Google dan nama kelasnya -

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Simbol tersebut memiliki properti berikut - path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity, dan strokeWeight.

Contoh

Contoh berikut menunjukkan cara menggambar simbol yang telah ditentukan di Google Map.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Menganimasikan Simbol

Sama seperti penanda, Anda juga dapat menambahkan animasi seperti pantulan dan jatuhkan ke simbol.

Contoh

Contoh berikut menunjukkan bagaimana menggunakan simbol sebagai penanda pada peta dan menambahkan animasi padanya -

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Program JavaScript Google Maps dapat merespon berbagai event yang dibuat oleh pengguna. Bab ini memberikan contoh yang mendemonstrasikan cara melakukan penanganan peristiwa saat bekerja dengan Google Maps.

Menambahkan Pemroses Acara

Anda dapat menambahkan pendengar acara menggunakan metode ini addListener(). Ini menerima parameter seperti nama objek yang ingin kita tambahkan pendengar, nama acara, dan acara handler.

Contoh

Contoh berikut menunjukkan cara menambahkan event listener ke objek marker. Program ini menaikkan nilai zoom peta sebesar 5 setiap kali kita mengklik dua kali pada penanda.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Membuka Jendela Info di Klik

Kode berikut membuka jendela info saat mengklik penanda -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

Menghapus Pendengar

Anda dapat menghapus listener yang ada menggunakan metode ini removeListener(). Metode ini menerima objek pendengar, oleh karena itu kita harus menetapkan pendengar ke variabel dan meneruskannya ke metode ini.

Contoh

Kode berikut menunjukkan cara menghapus pendengar -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Ini menghasilkan keluaran berikut -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved