GOOGLE MAPS
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Google Map Controls - Custom Map Control

Tiếp theo bài cấu hình map controls nâng cao chúng ta tiếp tục tìm hiểu các kiến thức nâng cao hơn đó là Custom Google Map Controls Advance. Như bạn biết tất cả những gì hiển thị trên Browser để là các đoạn mã HTML bình thường nên bạn muốn hiển thị như thế nào thì chỉ cần đánh vào thẻ HTML và CSS. Dưới đây là một quy trình chuẩn giúp bạn custom google map.

  • Định nghĩa các style cho element bạn muốn custom
  • Xử lý tương tác người dùng hoặc bản đồ thông qua các sự kiện (events)
  • Tạo một thẻ DIV bao quanh Controls và thêm nó vào hệ thống Properties của Map Control.

Bây giờ ta sẽ đi sâu vào từng phần cho bạn thấy.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Vẽ lại giao diện controls google map

Như phần giới thiệu trên, ta sẽ đặt các controls vào một thẻ DIV và style cho thẻ DIV này. Dưới đây là một ví dụ thể hiện vấn đề này:

 

// Tạo một thẻ div
var controlDiv = document.createElement('div');

// Thiết lập style cho thẻ div
controlDiv.style.padding = '5px';

// Tạo control UI bằng thẻ div
var controlUI = document.createElement('div');

// Thiết lập style cho controlUI
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';

// Gắn controlUI vào controlDiv
controlDiv.appendChild(controlUI);

// Thiết lập CSS tiếp, tạo một thẻ div tiếp theo
var controlText = document.createElement('div');

// Và thiets lập style
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<strong>Home</strong>';

// ControlUI tiếp tục append controlText vào
controlUI.appendChild(controlText);

Ví dụ này chỉ đọc tham khảo để hiểu cách tạo mới một thẻ div, gán một thẻ HTML khác vào thẻ div, ...

 

2. Xử lý sự kiện các Custom Controls Google Map

Khi bạn tạo một trình điều khiển thì chắc chắn bạn muốn trình điều khiển đó thực hiện một nhiệm vụ gì đó trong project của bạn. Control đó có thể được thay đổi trạng thái bởi chính người dùng hoặc do bản đồ Map can thiệp vào. Với người dùng thì đơn giản nhưng đối với MAP thì lại là vấn đề khó khăn. Nhưng bạn đừng lo, google map đã cung cấp các API cho phép ta giải quyết vấn đề này đó chính là hàm addDomListener().

Ví dụ:

 

// Tạo vị trí bản đồ tại Chicago
var chicago = new google.maps.LatLng(41.850033, -87.6500523);

// Them sự kiện click vào outer thì sẽ di chuyển bản đồ tới chicago
google.maps.event.addDomListener(outer, 'click', function() {
  map.setCenter(chicago);
});

 

3. Positioning Custom Controls

Các trình điều khiển tùy chỉnh (tự tạo) được đặt ở một vị trí nào đó trên bản đồ được xác định bởi chính coder (google map controls position), danh sách các control hiện tại ở một vị trí nào đó được xác định bởi mảng map.controls và các key chính là những vị trí của đối tượng google.maps.ControlPositions.

Ví dụ:

 

// Tạo div control mới
var controlDiv = document.createElement('div');

// gắn nó vào vịt rí TOP_RIGHT
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);

 

4. Ví dụ Custom Control Google Map

Trong ví dụ này ta sẽ tạo một bản đồ google map, một button với tên là HOME và đặt nó ở vị trí TOP_RIGHT. Khi click vào biểu tượng HOME này thì bản đồ sẽ di chuyển đến vị trí trung tâm thành phố Hồ Chí Minh.

Xem demo:

 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Custom controls</title>
        <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>
            
            // Biến lưu trữ map
            var map;
            
            // Thông số tung độ vĩ độ HCM
            var hochiminh = new google.maps.LatLng(10.771971, 106.697845);

            /**
             * The HomeControl thêm control vào google map
             * kết quả trả về là vị trí trung tâm thành phố HCM
             * tham số truyenf vào là control Div và map hiện tại
             * @constructor
             */
            function HomeControl(controlDiv) 
            {

                // Style cho div
                controlDiv.style.padding = '5px';

                // Tạo UI và Style cho UI
                var controlUI = document.createElement('div');
                controlUI.style.backgroundColor = 'white';
                controlUI.style.borderStyle = 'solid';
                controlUI.style.borderWidth = '2px';
                controlUI.style.cursor = 'pointer';
                controlUI.style.textAlign = 'center';
                controlUI.title = 'Click to set the map to Home';
                // Gán ControlUI vào controlDiv
                controlDiv.appendChild(controlUI);
                
                // Style cho đoạn text bên trong  và gán vào controlUI
                var controlText = document.createElement('div');
                controlText.style.fontFamily = 'Arial,sans-serif';
                controlText.style.fontSize = '12px';
                controlText.style.paddingLeft = '4px';
                controlText.style.paddingRight = '4px';
                controlText.innerHTML = '<b>Home</b>';
                controlUI.appendChild(controlText);
                
                // Khi click vào controlUI thì sẽ thiết lập vị trí center TPHCM
                google.maps.event.addDomListener(controlUI, 'click', function() {
                    map.setCenter(hochiminh);
                });

            }

            function initialize() 
            {
                
                var mapDiv = document.getElementById('map-canvas');
                
                var mapOptions = {
                    zoom: 12,
                    center: hochiminh
                };
                
                map = new google.maps.Map(mapDiv, mapOptions);
                
                var homeControlDiv = document.createElement('div');
                
                // Khởi tạo bản đồ
                var homeControl = new HomeControl(homeControlDiv);
                
                // thiết lập index
                homeControlDiv.index = 1;
                
                // Gắn vào vị trí TOP_RIGHT
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
            
        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

 

5. Thêm trạng thái vào Custom Control Google Map

Ở ví dụ ở mục 4 chúng ta xác định vị trí bản đồ TP Hồ Chí Minh, bây giờ chúng ta sẽ làm ví dụ nâng cao hơn xíu là khi người dùng kéo bản đồ đến vị trí khác, sau đó click vào một control với tên (Thiết lập trung tâm) thì sẽ thiết lập vị trí trung tâm chính là nơi đang ở chứ không phải là TPHCM nữa.

Xem demo:

 

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Custom controls</title>
        <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>

            var map;
            
            var hochiminh = new google.maps.LatLng(10.771971, 106.697845);
            
            // Định nghĩa một property tên home_ vào đối tượng HomeControl
            HomeControl.prototype.home_ = null;
            
            // Định nghĩa method getHome
            HomeControl.prototype.getHome = function() {
                return this.home_;
            };
            
            // Định nghĩa method setHome
            HomeControl.prototype.setHome = function(home) {
                this.home_ = home;
            };
            
            function HomeControl(controlDiv, map, home) 
            {

                var control = this;

                // thuộc tính home_ có giá trị bằng tọa độ home truyền vào
                control.home_ = home;
                
                controlDiv.style.padding = '5px';

                // Set CSS for the control border
                var goHomeUI = document.createElement('div');
                goHomeUI.style.backgroundColor = 'white';
                goHomeUI.style.borderStyle = 'solid';
                goHomeUI.style.borderWidth = '2px';
                goHomeUI.style.cursor = 'pointer';
                goHomeUI.style.textAlign = 'center';
                goHomeUI.title = 'Click to set the map to Home';
                controlDiv.appendChild(goHomeUI);

                // Set CSS for the control interior
                var goHomeText = document.createElement('div');
                goHomeText.style.fontFamily = 'Arial,sans-serif';
                goHomeText.style.fontSize = '12px';
                goHomeText.style.paddingLeft = '4px';
                goHomeText.style.paddingRight = '4px';
                goHomeText.innerHTML = '<b>Home</b>';
                goHomeUI.appendChild(goHomeText);

                // Set CSS for the setHome control border
                var setHomeUI = document.createElement('div');
                setHomeUI.style.backgroundColor = 'white';
                setHomeUI.style.borderStyle = 'solid';
                setHomeUI.style.borderWidth = '2px';
                setHomeUI.style.cursor = 'pointer';
                setHomeUI.style.textAlign = 'center';
                setHomeUI.title = 'Click to set Home to the current center';
                controlDiv.appendChild(setHomeUI);

                // Set CSS for the control interior
                var setHomeText = document.createElement('div');
                setHomeText.style.fontFamily = 'Arial,sans-serif';
                setHomeText.style.fontSize = '12px';
                setHomeText.style.paddingLeft = '4px';
                setHomeText.style.paddingRight = '4px';
                setHomeText.innerHTML = '<b>Set Home</b>';
                setHomeUI.appendChild(setHomeText);

                // Click vào HOME
                google.maps.event.addDomListener(goHomeUI, 'click', function() {
                    var currentHome = control.getHome();
                    map.setCenter(currentHome);
                });

                // Click vào setHome, thay đội vị trí center hiện tại
                google.maps.event.addDomListener(setHomeUI, 'click', function() {
                    var newHome = map.getCenter();
                    control.setHome(newHome);
                    alert('Bạn thiết lập home cho vị trí ' + map.getCenter());
                });
            }

            function initialize() {
                var mapDiv = document.getElementById('map-canvas');
                var mapOptions = {
                    zoom: 12,
                    center: hochiminh
                };
                map = new google.maps.Map(mapDiv, mapOptions);
                
                // tạo 2 control
                var homeControlDiv = document.createElement('div');
                var homeControl = new HomeControl(homeControlDiv, map, hochiminh);

                homeControlDiv.index = 1;
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
            }

            google.maps.event.addDomListener(window, 'load', initialize);

        </script>
    </head>
    <body>
        <div id="map-canvas"></div>
    </body>
</html>

 

 

6. Lời kết

Vậy là ta đã tìm hiểu xong danh sách Google Map Controls API và các ví dụ về controls. Với những ví dụ trên nếu bạn hiểu thì bạn đã có thể tự mình làm chủ dự án rồi đấy. Ở những bài tiếp theo ta sẽ tìm hiểu kiến thức khác và sẽ còn đề cập đến kiến thức cũ dài dài. Nếu bạn chưa biết đăng ký google API thì xem bài hướng dẫn đăng ký google Map API nhé.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top