Google Maps - Simbol

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 ini 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 output berikut -

Menganimasikan Simbol

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

Contoh

Contoh berikut menunjukkan cara menggunakan simbol sebagai penanda pada peta dan menambahkan animasi ke dalamnya -

<!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 output berikut -