TÌM HIỂU VỀ GOOGLE MAP API

I. Giới thiệu qua về Google Map API

1. Google Map API là gì?

- Google Map là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google, hỗ trợ nhiều dịch vụ khác của Google nổi bật là dẫn đường. Nó cho phép thấy bản đồ đường sá, đường đi cho xe đạp, cho người đi bộ và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới.

- Map API là gì?

+ Đó là một phương thức cho phép 1 website B sử dụng dịch vụ bản đồ của site A (gọi là Map API) và nhúng vào website của mình (site B). Site A ở đây là google map, site B là các web site cá nhân hoặc tổ chức muốn sử dụng dịch vụ của google, có thể rê chuột, room, đánh dấu trên bản đồ…

+ Các ứng dụng xây dựng trên maps được nhúng vào trang web cá nhân thông qua các thẻ javascripts do vậy việc sử dụng API google rất dễ dàng.

Google Map API đã được nâng cấp lên phiên bản thứ 3. Phiên bản này hỗ trợ không chỉ cho các máy để bàn truyền thống mà cho cả các thiết bị di động. Nhanh hơn và nhiều hơn các ứng dụng.

+ Điều quan trọng là các dịch vụ hoàn toàn miễn phí với việc xây dựng một ứng dụng nhỏ. Trả phí nếu đó là việc sử dụng cho mục đích kinh doanh, doanh nghiệp.

2. Một số ứng dụng của Google Map API

- Đánh dấu các địa điểm trên bản đồ cùng các thông tin cho địa điểm: các khu vui chơi giải trí, nhà hàng khách sạn, các quán ăn ngon, các shop quần áo, nữ trang…

- Chỉ dẫn đường đến các địa điểm cần tìm,chỉ dẫn đường giao thông công cộng, có thể là các địa điểm cung cấp như trên. Ở đây sử dụng các service google cung cấp.

- Khoanh vùng khu vực: các trung tâm kinh tế, khu đô thị, khu ô nhiễm…

- Tình trạng giao thông các khu vực…Đưa ra các giải pháp có thể…

3. Tạo 1 Google Map đơn giản

a. Tạo 1 API Key

- Truy cập vào https://code.google.com/apis/console và đăng nhập bằng tài khoản gmail của mình.

- Click vào Services link bên trái menu.

- Kéo xuống dưới tìm Google Maps API v3 service và kích hoạt dịch vụ.

- Click API Access, một API key sẽ hiện lên và bạn sẽ coppy lại để sử dụng.

b. Lấy kinh độ, vĩ độ để hiển thị bản đồ

Truy cập vào http://www.latlong.net/ và nhập địa điểm cần tìm.

c. Các loại bản đồ:

- ROADMAP (normal, default 2D map)

- SATELLITE (photographic map)

- HYBRID (photographic map + roads and city names)

- TERRAIN (map with mountains, rivers, etc.)

d. Hiển thị bản đồ

4. Lớp phủ (Overlays) của Google Map API

- Định nghĩa: Lớp phủ(overlays) là các đối tượng trên bản đồ, được gắn với vĩ độ, kinh độ.

- Các loại lớp phủ

+ Marker

+ Polyline

+ Polygon

+ Circle and Rectangle

+ Info Windows

+ Custom overlays

- Ở đây, ta đi sâu vào tìm hiểu về Marker, các Overlays còn lại, mọi người có thể xem thêm tại:http://www.w3schools.com/googleAPI/google_maps_overlays.asp.

Marker: dùng để xác định một điểm trên bản đồ hoặc đánh dấu địa điểm dựa trên vĩ độ và kinh độ

* Các trường được xây dựng trong new google.maps.Marker:

- Position(bắt buộc): quy định là tọa độ LatLng của điểm được đánh dấu.

- Map(tùy chọn): quy định đối tượng bản đồ được đánh dấu. nếu thuộc tính này được khai báo trong đây nó sẽ thay thế cho Markers.setMap(map).

- Icon(tùy chọn): hình ảnh tùy chọn mà bạn muốn hiển thị thay thế hình ảnh mặc định. Dùng tùy chọn này thay thế cho marker.setIcon(link đến hình ảnh trong thư mục).

- Title(tùy chọn): tiêu đề của địa điểm.

- Draggable(tùy chọn): thuộc tính động của điểm đánh dấu, thể hiện sự chuyển động của điểm được đánh dấu. Nếu TRUE tính động được khởi động.

- Animation: cách thức chuyển động của điểm đánh dấu. CÓ 2 cách thức DRAG, Bounce.

* Khai báo: new google.maps.Marker({… });

* Để đánh dấu 1 marker:

var marker=new google.maps.Marker({

position:myCenter,

});

marker.setMap(map);

* Code show bản đồ với tâm và điểm đánh dấu đều là Hà Nội:

* Kết quả hiện thị trên trang web như sau:

II. Google Map Event

Sự kiện gồm 2 loại:

- UI Event: Lắng nghe sự kiện từ người dùng.

- MVC State change: Lắng nghe sự kiện từ sự thay đổi giá trị của các thuộc tính trên Map.

Để lắng nghe sự kiện, ta sử dụng phương thức addListener(). Phương thức này nhận vào 1 đối tượng, 1 kiểu sự kiện để lắng nghe và 1 phương thức xử lý khi sự kiện xảy ra.

1. UI Event

* Một số đối tượng trong Maps API được thiết kế để đáp ứng với sự kiện người sử dụng chẳng hạn như các sự kiện chuột hoặc bàn phím . Một đối tượng google.maps.Marker có thể lắng nghe người sử dụng các sự kiện sau đây , ví dụ :’click’, ‘dblclick’, ‘mouseup’, ‘mousedown’, ‘mouseover’, ‘mouseout’.

* Ví dụ:

- Click vào 1 marker để zoom bản đồ:

Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_click

- Mở 1 InfoWindow khi click vào Marker:

Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_infowindow

2. MVC State Change

a. Gồm các sự kiện:

- zoom_changed: sự kiện sẽ thực thi khi ta zoom size trên map

- center_changed: sự kiện sẽ thực thi khi thuộc tính center của map thay đổi

- title_changed: sự kiện sẽ thực thi khi thuộc tính title của map thay đổi

- heading_changed: sự kiện sẽ thực thi khi thuộc tính heading của map thay đổi

- dragstart: sự kiện sẽ thực thi khi người dùng bắt đầu drag bản đồ

- drag: sự kiện sẽ thực thi khi người dùng drag bản đồ

- dragend: sự kiện sẽ thực thi khi người dùng kết thúc drag bản đồ

- maptypeid_changed: sự kiện sẽ thực thi khi thuộc tính maptypeid của map thay đổi

b. Event Listeners (lắng nghe sự kiện)

* Handling Events

Ví dụ: Quay lại điểm đánh dấu

Khi di chuyển chuột làm thay đổi bản đồ, sự kiện này giúp điểm đánh dấu (marker) luôn hiển thị ở vị trí trung tâm của bản đồ:

Demo: http://www.w3schools.com/googleAPI/tryit.asp?filename=tryhtml_map_marker_pan

*Truyền tham số cho UI Events

Các sự kiện người dùng trong Google Map API thường được thêm vào một tham số sự kiện và tham số có thể được truy cập bằng sự kiện listener khi sự kiện xảy ra.

Ví dụ: Đoạn code này sẽ tạo ra 1 marker khi người dùng click chuột vào map:

Demo: https://developers.google.com/maps/documentation/javascript/examples/event-arguments

* Sử dụng Closeres trong sự kiện Listerner

Các event Listerner thường sử dụng Closures để truy cập đến các biến thường không nằm trong đối tượng của  các sự kiện đó.

Ví dụ: đoạn code dưới đây dùng Clousures để gán một thông điệp bí mật đến tập các marker, khi click vào mỗi marker sẽ hiện lên một phần của thông điệp ấy.

Demo: https://google-developers.appspot.com/maps/documentation/javascript/examples/event-closure

* Thiết lập và truy xuất thuộc tính trong event Handlers

Trong các sự kiện MVC State change bạn có thể truy xuất và thiết lập giá trị trong quá trình sự kiện được kích hoạt bằng các phương thức getProperties(), setProperties() trên đối tượng thực thi sự kiện.

Ví dụ: ta sẽ thiết lập một xử lý sự kiện để đáp ứng phóng to bảng đồ bằng cách đưa ra một cửa sổ thông tin hiển thị mức độ đó.

* Listening to DOM Events(lắng nghe sự kiện từ DOM)

Google Map Api hỗ trợ hai cách lắng nghe sự kiện từ DOM:

a. Sử dụng phương thức addDomListener(instance:Object, eventName:string, handler:Function)

+ instance có thể là một DOM element hỗ trợ bởi brownser bao gồm:

- các thành phần của DOM: window hoặc document.body.myform.

- tên của element như: document.getElementById(“foo”).

+ evenName là tên sự kiện ở đây ta dùng sự kiện load.

+ Handler: là một phương thức khởi tạo map.

b. Sử dụng sự kiện onload() của tài liệu HTML trong thẻ

Demo tai: https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple

III. Control (Điều khiển)

1. Control mặc đinh

Control mặc định được thiết lập cho Google Map gồm các thông số như sau:

- Zoom – hiển thị 1 thanh trượt hoặc button “+/-” để điều khiển mức zoom của Map

- Pan – công cụ để dịch chuyển map sang trái, phải, trên, dưới.

- MapType – cho phép người dùng chuyển đổi giữa 2 Map Types (roadmap và satellite)

- Street View – hiển thị 1 icon Pegman (hình người) mà có thể kéo bản đồ để enable Street View (xem chi tiết về Street).

2. Một số control khác

- Scale – hiển thị 1 đối tượng chia tỷ lệ bản đồ

- Rotate – hiển thị một biểu tượng nhỏ hình tròn cho phép bạn xoay bản đồ

- Overview Map – hiển thị một thumbnail overview map cho phép xem bản đồ hiện tại trong một khu vực rộng hơn.

Ta có thể chỉ định control nào được hiển thị khi tạo bản đồ (bên trong MapOptions) hoặc gọi bởi setOptions() để thay đổi map options.

3. Vô hiệu hóa các control mặc định

Nếu muốn tắt các control mặc định thì thiết lập thuộc tính disableDefaultUI (trong Map options object) thành true:

4. Bật tất cả các control

- Một số control xuất hiện trên bản đồ theo mặc định, trong khi những control khác sẽ không xuất hiện trừ khi ta thiết lập chúng.

- Thêm hoặc xóa các control từ bản đồ được quy định trong Map options object.

- Thiết lập control thành true để làm nó visible. Thiết lập control thành false để hide nó.

Sau đây là ví dụ, bật tất cả các control:

5. Sửa đổi controls

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

- Các control có thể được sửa đổi bằng cách xác định các trường control options.

- Ví dụ, options để thay đổi một zoom control được quy định bởi trường zoomControlOptions. Trường zoomControlOptions có thể chứa:

+ google.maps.ZoomControlStyle.SMALL – hiển thị 1 mini-zoom control (chỉ có 2 button + và -)

+ google.maps.ZoomControlStyle.LARGE – hiển thị zoom control trượt tiêu chuẩn

+ google.maps.ZoomControlStyle.DEFAULT – chọn zoom control tốt nhất dựa trên kích thước device và map

- Ta có thể thiết lập type control bởi trường mapTypeControlOptions. Trường mapTypeControlOptions có thể chứa:

+ google.maps.MapTypeControlStyle.HORIZONTAL_BAR – hiển thị 1 button cho mỗi map type

+ google.maps.MapTypeControlStyle.DROPDOWN_MENU – chọn map type thông qua 1 dropdown menu

+ google.maps.MapTypeControlStyle.DEFAULT – hiển thị hành vi mặc định (phụ thuộc screen size)

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

6. Control tùy chỉnh

Tạo một control tùy chỉnh mà luôn luôn đưa bạn trở lại London, khi nhấp vào (nếu bản đồ được kéo):