Bài 4: Các sự kiện trong google maps

Kích trên marker để zoom – một sự kiện điều khiển được gửi tới Google maps.

Kích trên điểm đánh dấu (marker) để Zoom

Chúng ta vẫn sử dụng bản đồ từ bài trước: bản đồ có vị trí trung tâm là hồ Hoàn Kiếm, Hà Nội.

Bây giờ chúng ta muốn zoom khi người sử dụng kích chuột trên điểm đánh dấu (chúng ta gắn một sự kiện điều khiển tới marker, khi kích vào nó thì bản đồ sẽ zoom.

Đây là đoạn code được thêm:

Ví dụ

// Zoom tới 15 khi kích trên marker when clicking on marker
google.maps.event.addListener(marker,‘click’,function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

Xem demo sự kiện click bạn có thể View Source để xem source code.

Chúng ta đăng ký xử lý sự kiện điều khiển thông qua phương addListener(). Phương thực này đặt vào mộtj đối tượng, một sự kiện lắng nghe và một hàm gọi tới khi sự kiện phát sinh.

Pan trở lại vị trí đánh dấu

Trong ví dụ này chúng ta sẽ thêm một sự kiện điều khiển tới bàn đồ để thay đổ thuộc tính ‘center’ và pan bản đồ trở lại vị trí đánh dấu sau 3 giấy dựa vào sự kiện center_changed:

Ví dụ

google.maps.event.addListener(map,‘center_changed’,function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

Xem sự kiện center_changed, kích chuột phải chọn View Source để xem code

Mở của sổ InfoWindow khi kích trên điểm đánh dấu

Kích trên điểm đánh dấu để hiển thị một cửa sổ hiển thị thêm thông tin văn bản cho điểm đó:

Ví dụ

var infowindow = new google.maps.InfoWindow({
content:“Hello World!”
});google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});

Xem sự kiện hiển thị cửa sổ thông tin, kích chuột phải chọn View Source để xem code

Thiết lập các điểm đánh dấu và mở cửa sổ InforWindow cho mỗi điểm đánh dấu đó

Chạy chức năng khi người dùng kích trên bản đồ.

Hàm placeMarker() đặt một điểm đánh dấu khi người sử dụng kích vào và hiển thị cửa sồ infowindow cùng với kinh độ và vĩ độ của điểm chúng ta chọn:

Ví dụ

google.maps.event.addListener(map, ‘click’, function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: ‘Vĩ độ: ‘ + location.lat() +
‘<br>Kinh độ: ‘ + location.lng()
});
infowindow.open(map,marker);
}

Xem sự kiện click lấy kinh độ và vĩ độ, kích chuột phải chọn View Source để xem code