Google Haritalar - Etkinlikler

Google Haritalar JavaScript programı, kullanıcı tarafından oluşturulan çeşitli olaylara yanıt verebilir. Bu bölüm, Google Haritalar ile çalışırken olay işlemenin nasıl gerçekleştirileceğini gösteren örnekler sunar.

Bir Etkinlik İşleyici Ekleme

Yöntemi kullanarak bir olay dinleyicisi ekleyebilirsiniz. addListener(). Dinleyiciyi eklemek istediğimiz nesne adı, olayın adı ve işleyici olayı gibi parametreleri kabul eder.

Misal

Aşağıdaki örnek, bir işaretleyici nesneye bir olay dinleyicisinin nasıl ekleneceğini gösterir. Program, işaretçiye her çift tıkladığımızda haritanın yakınlaştırma değerini 5 arttırır.

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

Aşağıdaki çıktıyı üretir -

Tıklamayla Bilgi Penceresi Açma

Aşağıdaki kod, işaretleyiciye tıklandığında bir bilgi penceresi açar -

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

Aşağıdaki çıktıyı üretir -

Dinleyiciyi Kaldırma

Yöntemi kullanarak mevcut bir dinleyiciyi kaldırabilirsiniz removeListener(). Bu yöntem dinleyici nesnesini kabul eder, bu nedenle dinleyiciyi bir değişkene atamalı ve bu yönteme geçirmeliyiz.

Misal

Aşağıdaki kod, bir dinleyicinin nasıl kaldırılacağını gösterir -

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

Aşağıdaki çıktıyı üretir -