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 -