Google Maps API cho phép bạn nhúng Google Maps trong trang web của bạn với mã JavaScript. API cung cấp một số tiện ích để thao tác bản đồ và thêm nội dung tới bản đồ thông qua một loạt các dịch vụ, cho phép bạn tạo ứng dụng bản đồ trên website của bạn.
Hình 23. Google Maps API 3.2.1. Maps API Basics
Phần tử cơ bản để bắt đầu hiểu về Google Maps API application là phần tử ‘map’.
Ví dụ đơn giản sau hiển thị một trang web chứa bản đồ 1000x500 với trung tâm là Hà Nội, Việt Nam :
Hình 24. map_api_basic.html
Trong thực hiện, chúng ta có một số điều cần lưu ý:
•Thẻ ‘script’ thực hiện việc chèn Maps API.
•Hàm JavaScript để tạo đối tượng “map”.
•Chúng ta khởi động đối tượng ‘map’ đó từ sự kiện ‘onLoad’ của thẻ ‘body’. Để hiểu sâu hơn, chúng ta có những bước sau:
- Thực hiện việc load Google Maps API
Trang web của bạn phải chứa một script trỏ tới URL
“http://maps.google.com/maps?file=api&v=2&key=yourkey” , nó chứa những biểu tượng và định nghĩa cần thiết cho sử dụng Google Maps API. Như đã nói ở phần trên, yourkey là key mà Google Maps API cung cấp cho bạn khi bạn đăng kí cho ứng dụng của mình – và nó là duy nhất đối với bạn.
- Phần tử Map DOM
Chúng ta tạo ra một phần tử ‘div’ và tham chiếu tới phần tử này trong DOM của trình duyệt (document object model). Toàn bộ bản đồ sẽ được hiện thị với kích cỡ mà thẻ <div> này đã quy định.
- Đối tượng cơ bản – Gmap2
Ở đây chúng ta tạo một đối tượng ‘map’ sử dụng toán tử ‘new’, đặc trưng một bản đồ là lớp Gmap2. Đối tượng của class định nghĩa một bản đồ trên một trang web.
Khi bạn tạo một đối tượng ‘map’ mới, bạn xác định một nốt DOM mới trong trang (thường sử dụng phần tử ‘div’) như một container cho bản đồ. Sau đó chúng ta tham chiếu tới phần tử thẻ ‘div’ này thông qua document.getElementById().
- Khởi động map
Một khi chúng ta đã tạo một map qua hàm tạo Gmap2, chúng ta phải khởi động nó. Việc này được hoàn thành với việc sử dụng hàm setCenter(). Hàm setCenter() yêu
<script src=
http://maps.google.com/maps?file=api&v=2&key=yourkey
type="text/javascript"> </script>
<div id="my_map " style="width: 1000px; height: 500px"></div>
var map = new GMap2(document.getElementById("my_map "));
map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault();
rằng hàm này phải được gửi trước tất cả các hàm trên map, bao gồm thiết lập và các thuộc tính khác của map.
Chúng ta gọi hàm setUIToDefault() để thiết lập giao diện bản đồ, bao gồm việc chuyển động quay và phóng to - thu nhỏ, lựa chọn loại bản đồ, ...
- Thực hiện loading map
Để đảm bảo bản đồ được đặt trên trang sau khi trang được load, chúng ta chỉ thực hiện hàm khi mà phần tử <body> của trang HTML nhận được một sự kiện onload. Và nhớ rằng, ở đây, hàm "initialize()" đã được viết.
Hàm Gunload() là một hàm chức năng thiết kế để ngăn rò rỉ bộ nhớ.
- Vĩđộ và Kinh độ
Đối tượng GLatLng cung cấp một cơ chế cho phép bạn tham chiếu tới các vị trí của bản đồ. Bạn xây dựng đối tượng GlatLng, thông qua tham số {vĩ độ, kinh độ} như được sử dụng trong bản đồ.
3.2.2. Maps API Events
Trong trình duyệt, sự tương tác của người sử dụng chuột và bàn phím tạo nên các sự kiện được lan truyền trong DOM. Khi những sự kiện được kích hoạt, một ‘event listeners’ sẽ nhận sự kiện và thực hiện chương trình tương ứng.
Google Maps API thêm vào những mô hình sự kiện này bởi định nghĩa sự kiện tùy thích cho đối tượng Maps API.
Sự kiện được thêm vào:
Hình 25. map_api_event.html
- Event Listensers
Để tạo thông báo của sự kiện khi bạn nhấn chuột, chúng ta sử dụng Gevent.addListener(). Hàm đó sử dụng một đối tượng, một sự kiện để lắng nghe (ở đây là ‘click’ chuột) và một hàm để tọi khi sự kiện xảy ra.
Trong ví dụ trên, để chắc chắn sự kiện ‘click’ xảy ra trên bản đồ bằng việc kiểm tra biến ‘latlng’. Sau đó chúng ta mở một cửa sổ thông tin cho việc click đó.
3.2.3. Maps API Controls
Ở ví dụ trên chúng ta đã thêm một số phần tử cho phép tương tác của người sử dụng qua bản đồ. Chúng được biết đến như ‘controls’, và là lớp con của lớp ‘Gcontrol’.
Bạn có thể sử dụng một số ‘controls’ cơ bản mà Maps API xây dựng:
• GLargeMapControl : bộ điều chỉnh (cỡ lớn) cho sự quay/phóng to-nhỏ, nó hiển thị trên cùng bên trái của bản đồ.
• GSmallMapControl : bộ điều chỉnh sự (cỡ nhỏ) quay/phóng to-nhỏ, hiển thị trên cùng bên trái của bản đồ.
• GsmallZoomControl : một bộ điều chỉnh chỉ phóng to-nhỏ, nó sẽ hiển thị từng mức độ phóng trên bản đồ.
• GscaleControl : một thang đo xuất hiện trên bản đồ.
• GmapTypeControl : một button cho phép người sử dụng đảo chiều giữa các loại bản đồ (giống như Bản đồ và Vệ tinh)
• GOverviewMapControl : một bản đồ được rút gọn ở góc trái dưới cùng của màn hình.
- MapType Controls
Mặc định, Google Maps API cung cấp 3 loại bản đồ:
• G_NORMAL_MAP : hiển thị một bản đồ bình thường, như một bản đồ 2D
GEvent.addListener(map,"click", function(overlay,latlng) { if (latlng) {
var myHtml = "The GLatLng value is: " + map.fromLatLngToDivPixel(latlng) + "<br>" + " at zoom level " + map.getZoom();
map.openInfoWindow(latlng, myHtml); }
• G_SATELLITE_MAP : hiển thị một bản đồ ảnh.
• G_HYBRID_MAP : hiển thị một sự pha trộn các ảnh và các tính năng nổi bật ( đường, tên thành phố).
Bạn có thể thay đổi bản đồ đang sử dụng bằng Gmap2.removeMapType() hoặc thêm chúng với Gmap2.addMapType().
- Thêm Controls tới Map
Bạn thêm controls tới bản đồ bằng hàm addControl(). Như ví dụ được đưa ra ở trên chúng ta cũng có thể thực hiện nhiều lần việc thêm này:
3.2.4. Map Overlays
Overlay là một đối tượng trên bản đồ gắn với vĩ độ/tung độ khi họ di chuyển hoặc kéo, phóng to-thu nhỏ bản đồ. Overlays phản ánh các đối tượng bạn thêm vào bản đồ để thiết kế các điểm, các đường và các vùng.
Maps API có một số loại overlays:
• Điểm trên bản đồ được hiển thị sử dụng ‘markers’ – đối tượng của lớp GMarker, và thường hiển thị một biểu tượng tùy thích.
• Đường trên bản đồ được hiển thị sử dụng ‘polylines’ (tập các điểm) – đối tượng của lớp Gpolyline.
• Vùng trên bản đồ hiển thị như ‘polygons’ (vùng với hình dạng bất kì) hoặc ‘ground overlays’ (vùng là hình chữ nhật).
• Bản đồ sẽ được hiển thị sử dụng ‘tile overlay’. Bạn có thể sửa đổi nó bằng cách sử dụng GTileLayerOverlay hoặc tạo mới sử dụng GMapType.
Mỗi overlay thực hiện một giao diện Goverlay. Overlay được thêm vào bản đồ sử dụng Gmap2.addOverlay() và có thể xóa bỏ sử dụng GMap2.removeOverlay().
Bạn sẽ nhìn thấy:
map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());
Hình 26. map_api_overlay.html
- Markers
Markers xác định điểm trên bản đồ. Chúng ta sử dụng G_DEFAULT_ICON để xác định icon tùy ý, GMarker cần GLatLng và một đối tượng tùy chọn GMarkerOptions như các biến.
- Marker có thể di chuyển
Ở ví dụ trên, chúng ta thực hiện cho marker có thể nhận được ‘click’ và có thể được kéo đến một ví trí mới. Những sự kiện có thể xảy ra trên marker: click, dragstart, drag, dragend. Và để những sự kiện này có tác dụng, chúng ta phải khởi động chúng.
- Icons
Một số lượng các image khác nhau có thể tạo nên một icon trong Maps API. Một Icons đơn giản nhất dựa trên kiểu G_DEFAULT_ICON. Bạn tạo một icon
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Marker <b>" + letter); }); GEvent.addListener(marker, "dragstart" , function() { map.closeInfoWindow(); });
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml("Bạn vừa di chuyển..." +
letter); });
- Polylines
GPolyline bao tạo các đường trên bản đồ. Một GPolyline bao gồm một chuỗi các điểm và tạo thành chuỗi các đoạn có thể liên kết điểm theo thứ tự,
Ta vẽ được đường trên bản đồ:
Hình 27. map_api_polyline.html 3.2.5. Google Maps API Services
- Geocoding
Geocoding là quá trình chuyển đổi địa chỉ vào một tọa độ địa lý. Google Maps API bao gồm Geocoding services mà có thể được truy cập trực tiếp qua HTTP Request hoặc bằng cách sử dụng một đối tượng GClientGeocoder.
- Geocoding Caches
Chúng ta sẽ có kết quả (khi bạn chọn ‘Tokyo, Japan’ trên dialog box):
KẾT LUẬN
Mashup đã thực sự tạo nên lớp ứng dụng mới hiệu quả và hữu ích trong môi trường ứng dụng web.
Luận văn đã giúp tôi hiểu được tổng quan cross-domain và các giải pháp cho cross-domain trong ajax. Đồng thời, bài luận cũng nêu được tính quan trọng và cần thiết trong việc tìm hướng giải quyết đối với cross-domain, phục vụ cho mashup – một lớp ứng dụng hữu ích trong thế giới web. Cùng với việc nghiên cứu, khóa luận đã áp dụng được lý thuyết vào để xây dựng lên một ứng dụng cho mashup với bản đồ trực tuyến tuy đơn giản nhưng đã hướng tới mục đích của đề tài.
Chưa có phương pháp thật sự hiệu quả để gọi cross-domain sử dụng ajax, vì vậy hướng phát triển tiếp theo cho việc nghiên cứu của luận văn sẽ mong muốn khám phá những phương pháp hiệu quả hơn cho cross-domain mang lại sự phát triển hiệu quả hơn cho các lớp ứng dụng web. Tiếp đó mong muốn phát triển thực nghiệm mashup đã xây dựng để tạo nên một website đặc trưng cho riêng mình.
TÀI LIỆU THAM KHẢO Tài liệu tiếng anh
[1] Collin Jackson và Helen J.Wang (2007) -
Subspace: Secure Cross-Domain Communication for Web Mashups. [2] Jesse Feiler - How to do Everything with Web Mashups 2.0. [3] Jon Howell, Collin Jackson, Helen J.Wang và Xiaofeng Fan -
MashupOS: Operating System Abstractions for Client Mashups.
[4] Head, Indigenous Studies Portal University of Saskatchewan Library (2007) - What’s a Mashup & Why Would I Want One?.
Website
[5] AJAX và vấn đề cross-domain -
http://www.javavietnam.org/javavn/mvnforum/viewthread_thread,15138
[6] API - http://www.programmableweb.com/apis
[7] Cross-domain-ajax - http://code.google.com/p/cross-domain-ajax/
[8] Cross Domain AJAX: A quick summary -
http://snook.ca/archives/javascript/cross_domain_aj/
[9] Cross-domain AJAX - http://www.nhchau.com/blog/2008/06/01/2366- cross-domain-ajax.htm
[10] Calling Cross Domain Web Services in AJAX - http://www.simple- talk.com/dotnet/asp.net/calling-cross-domain-web-services-in-ajax/
[11] Giải quyết vấn đề cross-domain của AJAX - http://cntt.tv/nodes/show/217
[12] Introduction to Cross-Domain Ajax -
http://jimbojw.com/wiki/index.php?title=Introduction_to_Cross-Domain_Ajax
[13] JSONRequest - http://www.json.org/JSONRequest.html
[14] Make Mashups Talk Across Domains(2006) –
http://www.devx.com/webdev/Article/30860 [15] Mashup cho ứng dụng nghiệp vụ -
http://www.viettotal.com/VietNews/CongngheWeb/tabid/88/CategoryID/1/News/57/De fault.aspx
[16] Shaping the future of secure Ajax mashups (2007) –
http://www.ibm.com/developerworks/library/x-securemashups/ [17] http://www.ebay.com/
[18] http://www.flickr.com/
[19] http://www.amazon.com/