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.

test php

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.
  • Đị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.

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:

 

Bài viết này được đăng tại [free tuts .net]

// 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:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

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

Top