Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Google map events - Getting - Setting -Quản lý Listeners
Ở bài Google map events - UI Events - MVC State Changes chúng ta đã tìm hiểu một số khái niệm về Events trong google map, các ví dụ điển hình của events. Tuy nhiên các ví dụ chưa thể hiện được tất cả những cách dùng google map thông dụng, nên trong bài này ta tiếp tục tìm hiểu các ví dụ của google map nhé.
1. Google Map - Getting and Setting Properties within Event Handlers
Getting (Lấy) và Setting (Thiết lập) là hai khái niệm rất quen thuộc trong lập trình hướng đối tượng, nó được sử dụng trong các mô hình thiết kế Design Partern của OOP. Trong javascript cũng tương tự, ta sử dụng hai khái niệm này để lấy các thuộc tính của UI Events hoặc MVC State google map, lúc này biến mà chúng ta gán thuộc tính này sẽ lưu toàn bộ các trạng thái hiện tại của thuộc tính, và khi bạn thay đổi thuộc tính trong biến đó thì tương ứng trong đối tượng Google cũng thay đổi theo.
Ví dụ dưới đây mô tả cách sử dụng GET và SET trong Google Map: Xem demo
Trong ví dụ này xử lý sự kiện khi Zoom bản đồ google map ta sẽ lấy độ Zoom và hiển thị tại vị trí trung tâm của bản đồ.
Bài viết này được đăng tại [free tuts .net]
<!DOCTYPE html>
<html>
<head>
<title>Getting properties with event handlers</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
function initialize()
{
// Lấy tọa độ ban đầu
var myLatLng = new google.maps.LatLng(10.771971, 106.697845);
var mapOptions = {
zoom: 4,
center: myLatLng
};
// Tạo bản đồ
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Tạo một cửa sổ mới với vị trí nằm ngay giữa bản đồ
var infowindow = new google.maps.InfoWindow({
content: 'Change the zoom level',
position: myLatLng
});
// Mở cửa sổ
infowindow.open(map);
// Gán vào sự kiện Zoom_change một hàm, hàm này se show độ zoom
google.maps.event.addListener(map, 'zoom_changed', function()
{
// Lấy thông số Zoom hiện tại
var zoomLevel = map.getZoom();
// Thiết lập trung tâm bản đồ tại ví trí cũ
map.setCenter(myLatLng);
// Đổi thông tin của infowindow
infowindow.setContent('Zoom: ' + zoomLevel);
});
}
// Hàm gọi tạo bản đồ
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
2. Google Map - Listening to DOM Events
Trong mô hình sự kiện của Google Map được tạo và quản lý dưới hệ thống Instance của Google Map, như vậy muốn truy xuất tới Events Google Map thì bắt buộc bạn phải thao tác lên trên đối tượng của Google Map. Giả sử giờ tôi muốn tạo một button, khi click vào button đó thì sự kiện nào đó trong google map sẽ nhận thấy và thực thi theo, rất đơn giản ta sử dụng hàm addDomListener() của Google Map.
Cú pháp: addDomListener(instance:Object, eventName:string, handler:Function)
Lưu ý rằng addDomListener() chỉ đơn giản là nhận diện các sự kiện của DOM trên trình duyệt và xử lý theo mô hình DOM của trình duyệt. Tuy nhiên đa số các trình duyệt hiện tại hỗ trợ DOM ở mức Level2, để tham khảo các mức Dom Level thì bạn tham khảo theo link Mozilla DOM Levels.
Ở các bài trước tôi sử dụng hàm window.onload để khởi tạo bản đồ google map, tuy nhiên ta vẫn còn cách khác nữa là gán vào sự kiện onload của thẻ <body>. Tham khảo 2 cách dưới đây:
Cách 1:
<script>
function initialize() {
// Map initialization
}
</script>
<body onload="initialize()">
<div id="map-canvas"></div>
</body><br><br><br><br><br><br><br>Cách 2:
<script>
function initialize() {
// Map initialization
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas"></div>
</body>
Ví dụ dưới đây sẽ thực hiện alert lên một thông báo nếu như ta click vào div canvas chứa bản đồ.
<!DOCTYPE html>
<html>
<head>
<title>Listening to DOM events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
function initialize()
{
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(10.771971, 106.697845)
};
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, mapOptions);
// Gán sự kiện khi click vào thẻ div mapDiv vào google map,
// sẽ thông báo message
google.maps.event.addDomListener(mapDiv, 'click', showAlert);
}
function showAlert() {
window.alert('DIV clicked');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
3. Google Map - Removing Event Listeners
Để thêm một sự kiện nào đó ta dùng hàm addListener(), và để xóa một sự kiện nào đó ra khỏi hệ thống DOM của Google Map ta dùng hàm removeListener().
Ví dụ:
var listener1 = google.maps.event.addListener(marker, 'click', aFunction); google.maps.event.removeListener(listener1);
Để xóa hết các listener ta dùng hàm clearInstanceListeners().
Ví dụ:
var listener1 = google.maps.event.addListener(marker, 'click', aFunction); var listener2 = google.maps.event.addListener(marker, 'mouseover', bFunction); // Remove listener1 and listener2 from marker instance. google.maps.event.clearInstanceListeners(marker);
Để xóa danh sách các listener theo một sự kiện nào đó, ví dụ như click thì ta sử dụng hàm clearListeners().
Ví dụ:
marker.addListener('click', aFunction);
marker.addListener('click', bFunction);
marker.addListener('click', cFunction);
// Remove all click listeners from marker instance.
google.maps.event.clearListeners(marker, 'click');
Để tham khảo danh sách các sự kiện bạn vào link google.maps.event namespace để đọc thêm.
4. Lời kết
Vậy là coi như ta kết thúc phần tìm hiểu các sự kiện UI Events và MVC State trong Google Map, qua bài này tôi hy vọng bạn sẽ hiểu được một số API căn bản như API tạo bản đồ, api tạo marker, hiểu được cách sử dụng events trong google map.
