Bài 5: Các control google maps

Bản đồ của Google với tập các control mặc định:

Google Maps – Các control mặc định

Khi bạn hiển thị một bản đồ chuẩn của Google map, nó đi kèm với tập các control mặc định:

Zoom – hiển thị một thanh trượt hoặc các nút “+/-” để điều khiển mức phóng to thu nhỏ của bản đồ
Pan – hiển thị một control Pan cho phép di chuyển bản đồ để xem các vị trí khác
MapType – cho phép người dùng chuyển đổi giữa các kiểu bản đồ (bản đồ roadmap và satellite)
Street View – hiển thị biểu tượng hình người mà có thể được kéo vào bản ddoof để kích hoạt tính năng Street View

Google Maps – Các control khác

Ngoài các control mặc định, Google Maps cũng có:

Scale – hiển thị tỉ lệ bản đồ so với thực tế
Rotate – hiển thị một biểu tượng nhỏ hình tròn mà cho phép bạn xoay bản đồ
Overview Map – hiển thị một bản đồ nhỏ tổng quan phản ánh khung nhìn bản đồ hiện tại với diện tích rộng hơn

Bạn có thể chỉ định control nào sẽ hiển thị khi tạo bản đồ (bên trong MapOptions) hoặc gọi setOptions() để thay đổi các tuỳ chọn của bản đồ.

Google Maps – Vô hiệu hoá các control mặc định

Có thể bạn muốn tắt các control mặc định.

Để làm điều này, thiết lập tuộc tính disableDefaultUI của bản đồ (trong các đối tượng tuỳ chọn của bản đồ) thành true:

Ví dụ

disableDefaultUI:true

Xem demo vô hiệu hoá các control mặc định của bản đồ, kích View Source để xem mã nguồn.

Google Maps – Bật tất cả các control

Một vài control xuất hiện măc định trên bản đồ, một số control khác thì không trừ khi bạn thiết lập chúng.

Thêm hoặc bỏ các control của bản đồ được thiết lập trong các tuỳ chọn của đối tượng bản đồ.

Thiết lập control là true thì control sẽ được hiển thị, ngược lại chúng sẽ bị ẩn đi.

Ví dụ sau thực hiện bật tất cả các control:

Ví dụ

panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

Xem demo chức năng bật tất cả các control, kich chuột phải chọn View Source để xem code.

Google Maps – Chỉnh sửa các control

Một số control có thể được cấu hình.

Các control có thể được chỉnh sửa bằng thay đổi các trường tuỳ chọn của control.

Ví dụ các tuỳ chọn để chỉnh sửa control Zoom được cấu hình trong trường zoomControlOptions. Trường zoomControlOptions có thể chứa:

google.maps.ZoomControlStyle.SMALL – hiển thị một control zoom tối thiểu (chỉ có nút + và -)
google.maps.ZoomControlStyle.LARGE – hiển thị control zoom trượt chuẩn
google.maps.ZoomControlStyle.DEFAULT – chọn control zoom tốt nhất dựa trên thiết bị truy cập và kích thước bản đồ

Ví dụ

zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}

Xem demo chỉnh sửa control zoom thành small, kích View Source để xem mã nguồn.

Chú ý: Nếu bạn chỉnh sửa một control, cần phải enable các control (thiết lập nó thành true).

Một cách cấu hình khác của control là trên MapType của control.

Các tuỳ chọn cho việc chỉnh sửa control được chỉ định với trường mapTypeControlOptions. Trường mapTypeControlOptions có thể chứa:

google.maps.MapTypeControlStyle.HORIZONTAL_BAR – hiển thị một bút cho mỗi loại bản đồ
google.maps.MapTypeControlStyle.DROPDOWN_MENU – chọn kiểu bản đồ từ menu đổ xuống
google.maps.MapTypeControlStyle.DEFAULT – hiển thị “mặc định” (phụ thuộc vào kích thước màn hình)

Ví dụ

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Xem demo tạo menu dạng đổ xuống để chọn kiểu bản đồ, kích View Source để xem mã nguồn.

Bạn cũng có thể đặt vị trí cho một control, với thuộc tính ControlPosition:

Ví dụ:

mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
}

Xem demo chỉnh sửa vị trí hiển thị của menu chọn kiểu bản đồ, kích View Source để xem mã nguồn.

Google Maps – Tuỳ chỉnh các control

Tạo một control “Home” cho phép có thể quay trở lại vị trí trung tâm ban đầu (Hồ Hoàn Kiếm) khi kích vào (nếu bản đồ được kéo đi chỗ khác)

Ví dụ

controlDiv.style.padding = ‘5px’;
var controlUI = document.createElement(‘div’);
controlUI.style.backgroundColor = ‘yellow’;
controlUI.style.border=‘1px solid’;
controlUI.style.cursor = ‘pointer’;
controlUI.style.textAlign = ‘center’;
controlUI.title = ‘Trở về vị trí trung tâm Hà Nội’;
controlDiv.appendChild(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);

Xem demo tạo một nút “Home” di chuyển bản đồ về vị trí trung tâm sau khi bị kéo đi vị trí khác, kích View Source để xem mã nguồn.