Cách tạo Google API – Marker và Info Windows

Tác giả: Phạm Lê Tấn Đạt

Mục đích: Nội dung của chủ đề này giúp tìm hiểu về 02 overlays quan trọng của Google Maps JavaScript API. Qua đó, chúng tôi sẽ thực hiện các ví dụ để áp dụng các khái niệm này

Yêu cầu

• Nắm vững các khái niệm về HTML và javascript cơ bản

• Đã sử dụng qua javascript

• Đã nắm vững kiến thức cơ bản và thực hiện hoàn tất nội dung bài “Google API – Tạo một bản đồ trên web với Google Maps API”

• Đã nắm vững kiến thức cơ bản và thực hiện hoàn tất nội dung bài “Google API – Google API – Polylines và Polygons”

• Tools sử dụng ở đây là Netbeans 6.9.1

• JDK 6 update 22

• Server: Tomcat 6.0.26

Một số khái niệm cơ bản

• Marker

  • Là một hiển thị cho một điểm nhất định trên bản đồ

  • Tương tự như các overlay khác, marker cần 1 markerOptions để thiết lập các thông số cho 1 marker

  • Để hiển thị một marker trên bản đồ, chúng ta chỉ cần quan tâm 3 tham số cụ thể như sau

    • position (tham số bắt buột phải sử dụng):  là một đối tưởng kiểu LatLong (LatLong là các điểm mà đường thẳng sẽ đi qua) thể hiện tọa độ của marker

    • map: là bản đồ mà marker sẽ hiển thị lên

    • title: là tooltip của marker

  • Ngoài ra, chúng ta có thể cần biết thêm một vài properties khác để áp dụng tùy theo ý định của chúng ta, cụ thể

    • icon: là đường dẫn đến hình hiển thị thay thế hình marker mặc định

    • dragable: cho phép kéo thả marker trên bản đồ. Nó có kiểu dữ liệu true hay false, nếu giá trị được thiết lập là true thì marker có thể kéo thả được

    • animation: là kiểu hiệu ứng cho marker.

      • Các hằng số mặc định của hằng số này có thể tham khảo tại địa chỉhttps://developers.google.com/maps/documentation/javascript/reference#Animation

  • Các option khác của marker, chúng ta có thể tham khảo thêm tại địa chỉhttps://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

• Info Windows

  • Là 1 cửa sổ chứa nội dung miêu tả cho một điểm cố định nào đó trên bản đồ

  • Chúng ta sẽ quan tâm đến một vài tham số quan trọng của infoWindowsOption, cụ thể

    • content: chứa một chuỗi text hoặc một node DOM hoặc mã HTML để hiển thị khi Infowindows được mở

    • position: là một đối tưởng kiểu LatLong thể hiện tọa độ của Infowindows

    • maxWidth: là chiều rộng tối đa của Infowindows tính theo pixel

    • Các tham số khác, quí vị có thể tham khảo thêm tại địa chỉhttps://developers.google.com/maps/documentation/javascript/reference#MarkerOptions

Các bước thực hiện

• Chúng ta sẽ sử dụng lại project đã được làm trong bài “Google API – Tạo một bản đồ trên web với Google Maps API” và bài “Google API – Google API – Polylines và Polygons” để mở rộng và áp dụng 02 khái niệm về overlays đã nêu ra ở trên

• Tạo marker

  • Chúng ta vào trong hàm initialize() đã có trên trang index.jsp, bổ sung việc tạo ra một marker

    • Ở đây, chúng ta sẽ đưa vào tọa độ của trường đại học FPT, cụ thể

• Tọa độ LatLong của một ví trí bất kỳ mà chúng ta có thể thực hiện tìm kiếm thông qua địa chỉhttp://www.birdtheme.org/useful/googletool.html

• Chúng ta thực hiện deploy và chạy chương trình, chúng ta sẽ nhận được kết quả như sau

• Chúng ta, tiếp tục chỉnh sửa market để tạo ra market đánh dấu có khả năng di chuyển và icon thay đổi như sau

  • Chúng ta đưa hình ảnh chúng ta muốn vào trong project như hình vẽ

• Thay đổi code trong hàm initialize bằng cách bổ sung thêm 3 tham số tùy chọn icon, dragable, animation

• Thực hiện deploy và chạy chương trình

• Lưu ý: Khi chúng ta chạy chương trình, chúng ta có thể nhận thấy icon của marker đã thay đổi , nó có hiệu ứng nhảy linh động, và chúng ta có thể kéo thả marker được trên bản đồ

• Toàn bộ code javascript chúng ta tại thời điểm này như sau

• Chúng ta vừa thực hiện xong một marker trên bản đồ, chúng ta tiếp tục thực hiện info windows cho bản đồ, áp dụng tiếp nội dung trên

• Tạo info Windows

  • Chúng ta quay lại hàm initialize, để tạo một infoWindows mô tả thông tin của trường đại học FPT và tọa độ của trường như sau

• Trong code mô tả nêu trên, chúng ta nhìn thấy có hàm open() chứa 2 tham số là map được tạo ở bài 1, và marker nếu ta muốn infowindows hiển thị cho 1 marker nào đó. Ở đây ta truyền null vì chưa muốn dùng marker

• Chúng ta thực hiện deploy và chạy ứng dụng

• Bây giờ chúng ta sẽ sửa lại đoạn code trên để Infowindows hiển thị cho marker đã làm ở bên trên

• Deploy và chạy ứng dụng lại

• Tổng quan toàn bộ code của bài như sau

Chúc mừng các bạn, chúng ta đã hoàn tất xong việc tiếp cận 02 overlays quan trọng của Google Map API và sử dụng chúng trực tiếp trên bảng đồ

Rất mong sự góp ý chân thành của các bạn và hẹn các bạn trong bài tiếp theo liên quan đến google API, cụ thể làcác sự kiện của Google Maps và cách sử dụng chúng.