Google Maps - Penanda

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 -