tìm hiểu thông tin đa phương tiện trên bản đồ trực tuyến

MỤC LỤC
LỜI NÓI ĐẦU 2
CHƯƠNG 1: GIỚI THIỆU CHUNG 3
CHƯƠNG 2: GOOGLE MAP API 11
CHƯƠNG 3: HỆ THỐNG BẢN ĐỒ TRỰC TUYẾN SỬ DỤNG
GOOGLE MAP API 32
TỔNG KẾT 47
LỜI NÓI ĐẦU
Như chúng ta đã biết bản đồ từ thời xa xưa giúp con người có thể xác định
được phương hướng, vị trí chính xác nơi mình muốn đến, cần đến, giúp cho họ
có thể hiểu biết đầy đủ về vùng địa lý mà họ tìm hiểu. Ngày nay với sự giúp đỡ
của công nghệ thông tin người ta có thể ngồi tại một chỗ và tìm kiếm chính xác
đến một vùng nào đó trên thế giới bằng bản đồ trực tuyến.Hiện nay, bản đồ trực
tuyến là một trong những lĩnh vực phát triển mạnh mẽ được hầu hết các nơi trên
thế giới xây dựng và Việt Nam không nằm ngoài số đó.
Trên thế giới google đã xây dựng được một bản đồ trực tuyến của toàn thế
giới và cung cấp các API cho người lập trình để có thể tự xây dựng bản đồ trực
tuyến ở đất nước mình.
Với sự phát triển mạnh mẽ trong lĩnh vực bản đồ các công ty ở Việt Nam
như bamboo, địa danh đã xây dựng cơ sở dữ liệu của mình, hiển thị thông tin
dựa trên bản đồ của google. Chúng ứng dụng bởi rất nhiều công nghệ khác nhau
như .NET, PHP, JSP…Cùng xu hướng đó tôi đã xây dựng một trang web về lĩnh
vực bản đồ trực tuyến cho việc hiển thị thông tin gồm thông tin text, hình ảnh và
video của tất cả các thủ đô trên thế giới. Ở đây tôi sử dụng công nghệ .NET trên
nền Web 2.0 kết hợp với Google Map API.
CHƯƠNG 1: GIỚI THIỆU CHUNG
.1.1. Giới thiệu các công nghệ
1.1.1. Bản đồ
trực tuyến
1.1.1.1.1 Bản đồ
Theo wikipedia Bản đồ là bản vẽ đơn giản miêu tả một không gian, địa điểm và hiển

thị những thông số liên quan trực tiếp đến vị trí ấy có liên quan đến khu vực xung quanh.
Theo các nhà bản đồ: Bản đồ là sự miêu tả khái quát, thu nhỏ bề mặt trái đất hoặc
bề mặt thiên thể khác trên mặt phẳng trong một phép chiếu xác định, nội dung của bản đồ
được biểu thị bằng hệ thống ký hiệu quy ước.
Bản đồ thường dùng nhất trong địa lý. Theo nghĩa này bản đồ thường có hai chiều
mà vẫn biểu diễn một không gian có ba chiều đúng đắn. Môn bản đồ là khoa học và nghệ
thuật vẽ bản đồ.
1.1.1.1.2 Bản đồ trực tuyến
Theo Trung tâm Thông tin (CIREN thuộc Bộ Tài nguyên - Môi trường) cơ quan
cung cấp DV này: Ngoài việc cung cấp thông tin cho người truy cập, hệ bản đồ này còn
có ý nghĩa như là cơ sở dữ liệu quan trọng phục vụ hoạt động của các cơ quan Chính phủ,
các cơ quan nghiên cứu khoa học và phục vụ việc phổ cập thông tin cộng đồng.
DV này của CIREN được thiết lập theo đúng tiêu chuẩn OGC WMS. Do vậy, có
thể sử dụng bản đồ trực tuyến VN kết hợp với rất nhiều dịch vụ WMS của các tổ chức và
quốc gia trên thế giới. CIREN có hướng dẫn phương pháp kết hợp dịch vụ bản đồ trực
tuyến VN với nguồn ảnh vệ tinh của Microsoft Virtual Earth và Yahoo Map.
Người sử dụng có thể bổ sung các nguồn dữ liệu của riêng mình trên nền dữ liệu
địa lý toàn cầu mà không cần phải có dữ liệu gốc. Đặc biệt, hiện CIREN đang cung cấp
một ứng dụng miễn phí là Gaia 3.0 để khai thác dịch vụ WMS. Trong thời gian tới,
CIREN cung cấp các đường liên kết tới các dịch vụ WMS và đường link tới các dịch vụ
WMS quốc tế.
1.1.2. Công nghệ
Web 2.0
Sẽ thật tuyệt với nếu vào một ngày nào đó, chỉ với một chiếc máy tính được cài đặt
một hệ điều hành và một trình duyệt web duy nhất mà bạn lại có thể thực hiện được
những công việc như soạn thảo văn bản, chỉnh sửa ảnh, lập bảng tính, chat, chuyển đổi tài
liệu trực tuyến mà không cần phải cài thêm bất cứ một trình ứng dụng nào. Chuyện này
hoàn toàn không chỉ là một giấc mơ, bởi hiện tại nó đã và đang được phát triển dưới tên
gọi là Web 2.0.
Web 2.0 là thế hệ thứ hai của các dịch vụ đang tồn tại trên nền World Wide Web, nó

cho phép mọi người có thể cộng tác hay chia sẻ các thông tin trực tuyến với nhau. Trái
ngược với thế hệ đầu, Web 2.0 đưa người sử dụng tới gần hơn các ứng dụng chạy trên
Desktop so với các trang web bình thường chỉ chứa đựng các thông tin dạng tĩnh. Quy
ước chung về Web 2.0 đã được đưa ra tại các cuộc hội thảo O'Reilly Media và MediaLive
International về phát triển web vào năm 2004. Các ứng dụng của Web 2.0 có sự kết hợp
của các công nghệ được phát triển vào cuối thập niên 1990, bao gồm web service APIs
(1998), Ajax (1998) và web syndication (1997). Chúng cho phép đưa lên trang web một
số lượng lớn các phần mềm chạy trên nền web. Quy ước này còn bao gồm cả Blog (trang
tin cá nhân) và Wiki (từ điển bách khoa mã nguồn mở).
Hiện tại Web 2.0 đã phát triển khá mạnh và các trang web cung cấp các ứng dụng
chạy trực tuyến cũng đã được khá nhiều người sử dụng, có thể kể ra một số các trang web
sau:
 Trang web cung cấp dịch vụ chat trực tuyến () cho phép bạn chat thẳng
trên nền web mà không phải cài đặt các chương trình chat thông dụng như
Yahoo Messenger, MSN
 Trang web cung cấp dịch vụ soạn thảo văn bản trực tuyến () cho phép bạn
soạn thảo các tài liệu trực tuyến giống như soạn thảo bằng các chương trình
bình thường.
 Trang web cung cấp dịch vụ soạn thảo tài liệu đa năng () cho phép soạn
thảo và chỉnh sửa các loại tài liệu với các định dạng PDF/DOC/HTML.
 Trang web lưu trữ dữ liệu trực tuyến () cho phép lưu trữ dữ liệu lên đến 5
GB và có thể truy xuất mọi lúc, mọi nơi. Ngoài ra nó còn tính năng bảo vệ
chống virus và hư hỏng.
 Trang web giúp tạo các trang tin cá nhân () cho phép bạn có thể tạo ra các
trang web cá nhân với nội dung tùy thích. Nó cho phép đưa vào các thông
tin hay các ứng dụng trực tuyến vào trang cá nhân này.
 Trang web cung cấp dịch vụ tìm bản đồ () - (ảnh) cho phép bạn tra cứu bản
đồ của mọi nơi trên thế giới.
1.1.3. Công nghệ
mash up

Khi Web 2.0 đang dần trở nên thịnh hành thì cùng với nó công nghệ Mashup ra đời
và mặc dù chỉ mới phát triển trong thời gian gần đây nhưng nó đã tạo nên một cuộc cách
mạng lớn trong lĩnh vực này. Mashup cho phép mọi người thể hiện khả năng sáng tạo bất
tận bằng cách "nối" hai hay nhiều ứng dụng web lại với nhau. Thuật ngữ này được nói đến
đã lâu nhưng nay mới được giới công nghệ chú trọng hơn.
Theo từ điển trực tuyến Wikipedia, Mashup được định nghĩa như một công cụ có
khả năng lấy thông tin từ nhiều nguồn dữ liệu khác nhau nhằm tạo ra một dịch vụ tích
hợp đơn nhất và hoàn toàn mới mẻ. Người sử dụng không cần phải am hiểu về kỹ thuật
mà chỉ cần xây dựng dịch vụ dựa trên giao diện lập trình ứng dụng sẵn có như của
Google, Amazon, Flickr
Mashup được phân làm bốn loại tiêu biểu:
 Consumer mashup: Trích xuất dữ liệu khác nhau từ nhiều nguồn và được tập
hợp lại dưới một giao diện đồ họa đơn giản.
 Data mashup: Trộn dữ liệu cùng loại từ nhiều nguồn, chẳng hạn gộp dữ liệu từ
các RSS feed vào một feed đơn nhất.
 Business mashup: Sử dụng cả hai loại mashup trên, thường là tích hợp data ở
cả trong và ngoài công ty. Ví dụ, công ty bất động sản A có thể phân tích thị
phần khi so sánh số căn nhà họ bán được tuần qua với danh sách tổng các ngôi
nhà được bán trên thị trường.
 Telecom mashup là ứng dụng viễn thông tổng hợp, chẳng hạn kết hợp dịch vụ
tin nhắn từ công ty A, nhạc chuông của công ty B, thư thoại (voicemail) của
công ty C
Mashup thể hiện rõ đặc trưng của Web 2.0 là "cá nhân hóa thông tin". Chẳng hạn,
một nhà lập trình có thể tạo website chia sẻ ảnh và video của riêng mình khi kết hợp hai
dịch vụ YouTube và Flickr. Hay người sử dụng có thể "trộn" dữ liệu về tình trạng giao
thông ở Hà Nội với Google Maps để lập bản đồ các điểm thường xuyên tắc đường trong
thành phố
Mash-up là những công ty cung cấp dịch vụ có khả năng kết hợp các công nghệ
Web 2.0 lại với nhau. "Ngay khi Google Maps và Google Earth ra đời, nhiều người đã
tích hợp công cụ này vào trong dịch vụ của họ và kiếm bộn tiền, chẳng hạn xây dựng bản

đồ những khu vực nhiều tội phạm trong thành phố", Clark nói.
Có thể kể tên những mash-up phổ biến là RateItAll.com, nơi người dùng đưa ra
nhận xét về bất cứ thứ gì họ thích hoặc không thích, và Like.com, cho phép mọi người
tìm kiếm và so sánh những mặt hàng tương tự thứ họ vừa mua.
"Chỉ hai cái đầu và hai chiếc máy tính ở thung lũng Silicon cũng có thể làm được vô
số việc trong một thời gian ngắn. Do đó, các nhà đầu tư phải luôn xác định công ty họ
định rót vốn có những đặc điểm nổi trội so với số đông", chuyên gia đầu tư mạo hiểm
Peter Rip nhận xét.
Thông thường các dịch vụ web dùng mashup kết hợp bản đồ với nhiều loại dữ liệu
từ nhiều nguồn trên web. Trong năm qua, chúng ta đã chứng kiến nhiều site mới nổi đình
nổi đám, như Zillow.com dự đoán giá bất động sản hay AuctionMapper thể hiện các kết
quả tìm kiếm eBay trên bản đồ để giúp định vị những người bán hàng gần nhất.
Nhưng mashup còn có thể làm được nhiều việc hơn là những bản đồ có chú giải cho
những website thông thường. Kỹ thuật này cũng có thể áp dụng cho những ứng dụng
nghiệp vụ phục vụ hoạt động của doanh nghiệp. Vì mashup dựa trên nền tảng kỹ thuật
hiện có - JavaScript, XML và DHTML, kết hợp với kết nối Internet tốc độ cao để hỗ trợ
giao diện đồ họa và tính năng phong phú - nên không yêu cầu đầu tư nhiều. Mashup đang
bắt đầu được xem xét một cách nghiêm túc như là giải pháp cho các vấn đề tích hợp, ứng
dụng vốn thường là gánh nặng trước đây.
Cách thức tích hợp linh hoạt này đã được áp dụng trước đây, như các site thương
mại điện tử kết hợp dữ liệu giám sát của UPS hay FedEx (các dịch vụ vận chuyển hàng
hoá) với thông tin đơn hàng để cung cấp màn hình tổng hợp về tình trạng đơn hàng.
Trong môi trường doanh nghiệp, các hãng cung cấp giải pháp portal (cổng thông tin) như
IBM và Plumtree đã từ lâu cung cấp các công cụ đồ hoạ để cho phép kết hợp các nguồn
dữ liệu một cách dễ dàng, tạo nên các ứng dụng web tùy biến đơn giản.
Trên thực tế, chúng ta thường gặp bốn nội dung chính của Mashup:
 Bản đồ: Chẳng hạn người dùng lập bản đồ về bất động sản, cửa hàng quà tặng,
trường học tại một địa phương qua Google Maps.
 Video - ảnh: Ví dụ như dùng giao diện lập trình ứng dụng API của Flickr để
tạo mashup chia sẻ ảnh trên những site khác.

 Tìm kiếm - mua sắm: Là việc tích hợp search engine để tra cứu thông tin về du
lịch, nhà hàng
 Tin tức: Tiêu biểu nhất là Digg.com - dịch vụ hỗ trợ người sử dụng tập hợp tin
tức về công nghệ, văn hóa từ hàng loạt website khác nhau.
Tuy nhiên, vì các mashup dễ tạo hơn so với nhiều ứng dụng truyền thống nên chúng có
thể không được kiểm soát kỹ lưỡng về mặt bảo mật. Nhiều ứng dụng loại này dựa trên
JavaScript vốn có nhiều kẽ hở. Việc cài đặt thoải mái các thành phần mashup bên ngoài là
mối hiểm họa vì bạn không biết rõ bên trong nó thực hiện những tác vụ gì. Mặc dù hấp dẫn
với những ứng dụng phát triển nhanh và gọn nhẹ, nhưng mashup cũng có những hạn chế.
Theo Stefan Andreasen - giám đốc kỹ thuật của Kapow Technologies, "các mashup có ý
nghĩa cho 80% qui trình CNTT thông thường. Nhưng không công ty nào sử dụng mô hình
như mashup cho thông tin quan trọng".
1.1.4. Mô hình
mash up
Seely Brown khẳng định việc thương mại hoá nhanh chóng phần cứng và phần mềm
cùng với băng thông rộng sẽ giúp tạo nền tảng cho các dịch vụ tự xây dựng trang web
phức tạp hơn. Trong khi đó, các trình duyệt ngày càng hiện đại, cho phép các ứng dụng
web có tính tương tác cao hơn và người dùng sẽ quen với việc hoà trộn thông tin từ nhiều
nguồn khác nhau để tạo ra các ứng dụng của riêng họ. Đó chính là “mash-up”. Những
công cụ đang nổi lên như thế sẽ mở đường cho những người dùng tạo ra những trang web
phức tạp hơn, trong đó phải kể đến sự bùng nổ của blog, Wikis …
Có rất nhiều cách tiếp cận với ý tưởng cung cấp dịch vụ tự xây dựng trang web. Một
số nhà cung cấp đi theo hướng tạo ra những trang web đồng sở hữu – đó là các Wikis.
Nhưng cũng có nhà cung cấp lại đi theo hướng đưa các ứng dụng xuất bản web trên máy
tính để bàn lên web – đó chính là blog hay các trang web cá nhân.
Đối lập với các công cụ xuất bản web thế hệ đầu tiên như FrontPage hay
Dreamweaver, rất nhiều dịch vụ cho phép người dùng tạo ra các ứng dụng trực tiếp từ
trình duyệt web và lưu trữ một trang web hoàn thiện trên chính máy chủ của nhà cung
cấp dịch vụ. Thay vì chỉ đơn giản xuất bản các trang web, một số nhà cung cấp dịch vụ
đã tích hợp các dịch vụ web như YouTube, Flickr hay Amazon.com … cho phép người

dùng có thể tự tạo ra các mash-up của riêng họ.
1.1.5. Ứng dụng
kết hợp
Một xu hướng Web 2.0 phổ biến hiện nay là mash-up, tức mọi người kết hợp các bộ
dữ liệu khác nhau để tạo nên một dịch vụ hoặc sản phẩm mới. Nói đơn giản, mash-up
tương tự việc người ta tách bài hát trong các album của các nghệ sỹ ở từng thời kỳ để
chọn ra những ca khúc mà họ hài lòng nhất.
Google Maps là nền tảng yêu thích của giới tạo mash-up, như xây dựng bản đồ chứa
thông tin về tội phạm, về các hộ dân cư hoặc bản đồ thuế
.1.2. Một số trang web về du lịch có sử dụng bản đồ trực tuyến
1.2.1. Giới thiệu
trang web
Tại địa chỉ www.ciren.gov.vn, người truy cập có thể xem được bản đồ giao thông;
bản đồ hệ thống các vườn quốc gia, khu bảo tồn, rừng ngập mặn; bản đồ hiện trạng sử
dụng đất, quy hoạch đất; thông tin ảnh hàng không và ảnh vệ tinh
Trong cuộc sống, do quá bận rộn với những công việc hằng ngày mà những danh
lam thắng cảnh của nước ta ít được các bạn biết đến hoặc chỉ biết vài nơi quen thuộc, nổi
tiếng mà thôi.
Trang Web thangcanhdep.com có giao diện đẹp mắt, bố cục rõ ràng, dễ dàng trong
việc tra cứu và sử dụng. Website đang hoạt động với gần 100 khu du lịch, địa điểm, danh
lam thắng cảnh của nước ta được sắp xếp theo từng chủ đề, từng chỉ mục như Thắng
cảnh, Du lịch biển, Hang động, Vườn quốc gia Hơn thế nữa, các hình ảnh minh họa
cho những đề mục giống như trong tập Atlas Việt Nam, nên các bạn sẽ không gặp phải
những khó khăn trong lúc tra cứu.
Hình 1: Hình ảnh website có sử dụng bản đồ trực tuyến
1.2.2. Giới thiệu
bài toán
Ở các trang web trên hầu hết chỉ mang tính giới thiệu về mặt hình ảnh cùa một
vùng nào đó trên bản đồ trực tuyến, chưa có các đoạn video quảng bá, các đoạn văn mô tả
ngắn. Bên cạnh đó hạn chế về mặt cơ sở dữ liệu như việc giới thiệu hình ảnh về các thành

phố lớn của đất nước. Vì thế việc quảng bá hình ảnh của đất nước với thế giới đã phần
nào hạn chế.
Cùng với các trang web sử dụng bản đồ trực tuyến, tôi đã xây dựng trang web quản lý
hệ thống thông tin.Trước hết cho phép người dùng có thể xem được thông tin về các thủ
đô gồm diện tích, dân số và một số thông tin liên quan đến thủ đô đó. Bên cạnh đó hiển
thị video và hình ảnh về thủ đô đó. Đồng thời hiển thị vị trí vĩ độ, kinh độ của thủ đô đó
trên bản đồ trực tuyến.Ngoài ra trang web còn cho phép người quản lý có thể nhập dữ
liệu, chèn thêm dữ liệu, xoá hay sửa đổi dữ liệu khi thông tin thay đổi. Ở đây tôi sử dụng
công nghệ ASP.NET trên nền Web 2.0. Tạo cơ sở dữ liệu bằng SQL server 2005 kết hợp
với cơ sở dữ liệu bản đồ Google Map để hiển thị thông tin. Trong chương tiếp theo chúng
ta sẽ tìm hiểu kỹ hơn về Google Map API dùng cơ sở dữ liệu của Google Map kết hợp
với cơ sở dữ liệu tự xây dựng
CHƯƠNG 2: GOOGLE MAP API
.2.1. Basics (Cơ bản)
2.1.1. Loading
the Google Maps API (Tải Google Map API)
<script src=" />file=api&v=2&key=abcdefg"
type="text/javascript">
</script>
Lấy bản đồ từ Google Map bằng cách Truy cập URL nằm trong thẻ javascript sẽ
chứa các tất cả các ký tự đặc biệt và các định nghĩa khi bạn cần sử dụng Google Map
API. Trang web phải chứa đoạn script sử dụng khoá khi đăng nhập vào sử dụng API .
Trong ví dụ này khoá được xem như "abcdefg" .
2.1.2. Map DOM
Elements
<div id="map_canvas" style="width: 500px; height: 300px"></div>
Để hiện thị bản đồ lên trang web thông thường người ta sử dụng thẻ div và thiết lập
các yếu tố trong trình duyệt Document Object Model(DOM). Trong ví dụ trên một div
có id là “map_canvas” và đặt kích thước sử dụng các thuộc tính(độ rộng, chiều cao). Có
thể sử dụng GmapOptions xây dựng bản đồ, sử dụng kích thước của những đối tượng

chứa trong nó làm kích thước của chính nó.
2.1.3. The
Elementary Object
var map = new GMap2(document.getElementById("map_canvas"));
Bên cạnh đó ta có thể sử dụng lớp JavaScript cung cấp một bản đồ được đặt tên
GMAP2. Những đối tượng của lớp này sẽ tạo nên một bản đồ đơn trên web. Ta có tạo
một trường hợp của lớp này bằng cách sử dụng toán tử new của javascript.
2.1.4. Initializing
the Map (Khởi tạo bản đồ)
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
Trước khi việc tạo một bản đồ dùng hàm GMap2, cần phải khởi tạo nó. Sự khởi
tạo này được hoàn thành với sự sử dụng hàm setCenter(). Phương pháp setCenter() yêu
cầu một tọa độ GLatLng và mức khung nhìn bản đồ, phương pháp này phải được thực thi
trước mọi thao tác khác thực hiện trên bản đồ.
2.1.5. Loading
the Map(Tải bản đồ)
<body onload="initialize()" onunload="GUnload()">
Để bảo đảm bản đồ của ta chỉ được đặt lên trang sau khi đã tải trang đó từ server
xong, ta thực hiện chức năng xây dựng đối tượng GMap2 <body> .Phần tử của trang
HTML nhận được một sự kiện onload. Vì thế tránh được hành vi không thể đoán trước và
đưa cho chúng ta nhiều điều khiển trên bản đồ.
2.1.6. Latitudes
and Longitudes (Vĩ độ và kinh độ)
Bây giờ mà chúng ta có một bản đồ, ta cần một cách thức xác định vị trí trên bản
đồ. Đối tượng GLatLng cung cấp một cơ chế như vậy bên trong bản đồ Google API. Bạn
xây dựng một đối tượng GLatLng, chứa những tham số (của) nó {Vĩ độ, kinh độ}
var myGeographicCoordinates = new GLatLng(myLatitude,
myLongitude)
Chẳng hạn, một bản đồ trình bày một “cửa sổ” hiện thời của toàn bộ thế giới bên
trong cái gì được biết như một viewport. Viewport này có thể định nghĩa gần những

điểm hình chữ nhật . Đối tượng GLatLngBounds cung cấp chức năng này, định nghĩa
một vùng hình chữ nhật sử dụng hai đối tượng GLatLng đại diện cho southwest và những
góc đông bắc.
Hình 2: Thêm 10 vị trí đánh dấu khác nhau trên bản đồ
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Thêm 10 vị trí đánh dấu ở vị trí khác nhau trên bản đồ
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
2.1.7. Map
Attributes (Thuộc tính bản đồ)
Mặc định bản đồ trong Google API sử dụng nền tảng đã được “vẽ” chuẩn.Tuy
nhiên, những bản đồ Google API cũng hỗ trợ những kiểu những bản đồ khác. Các loại
bản đồ dưới đây là chuẩn
 G_NORMAL_MAP : Khung nhìn mặc định
 G_SATELLITE_MAP : hình ảnh từ vệ tinh
 G_HYBRID_MAP : Bản đồ trộn giữa khung nhìn mặc định và khung nhìn từ
vệ tinh

 G_DEFAULT_MAP_TYPES : Một tập hợp gồm 3 loại trên , hữu dụng cho
việc xử lý lặp. Có thể thiết lập loại bản đồ bằng cách sử dụng phương thức
GMap2 object’s setMapType()
Chẳng hạn, mã sau đây đặt bản đồ để sử dụng hình ảnh vệ tinh từ Google Earth
var map = new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);
Bản đồ cũng chứa đựng một số thuộc tính hữu ích cho việc xác nhận. Chẳng hạn, để
tìm ra kích thước của khung nhìn hiện tại ta sử dụng phương thức GMap2 object’s
getBounds() pháp để trả lại một giá trị GLatLngBounds. Ta có thể phóng to hoặc thu nhỏ
bản đồ để có những khung nhìn tuỳ ý. Ta có thể nhìn toàn bộ thế giới bằng cách thu bản
đồ nhỏ nhất(mức 0) hay phóng to cực đại để có thể nhìn được từng toà nhà riêng rẽ(mức
19) trong khung nhìn bình thường. Với khung nhìn từ vệ tinh có thể phóng to đến mức
20.Bạn có thể khôi phục mức tăng giảm hiện thời đang sử dụng bởi bản đồ bởi việc sử
dụng phương thức GMap2 object’s getZoom()
2.1.8. Map
Interactions (Tuỳ biến bản đồ)
Nó cung cấp khả năng tuỳ biến các đối tượng của bản đồ. Đối tượng Gmap2 cung
cấp 1 số lượng các phương thức cấu hình để thay đổi chính những tác động của đối tượng
bản đồ. Bạn có thể thay đổi bẳng một số phương thức tiện ích. Ví dụ phương thức
Gmap2.disableDragging(). Huỷ bỏ khả năng kéo thả bản đồ tới vị trí mới.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
window.setTimeout(function() {
map.panTo(new GLatLng(37.4569, -122.1569));
}, 1000);
2.1.9. Info
Windows
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.openInfoWindow(map.getCenter(),

document.createTextNode("Hello, world"));
.2.2. Event (Sự kiện)
2.2.1. Event
Listeners (Lắng nghe sự kiện)
Các sự kiện trong Google Map API được xử lý bằng các chức năng tiện ích bên
trong name space GEvent để tạo ra 1 đối tượng event listeners. Đối tượng này có tác
dụng lắng nghe và bắt sự kiện. Ví dụ đối tượng Gmap2 cung cấp các sự kiện “click”,
“double click” và “move”. Mõi sự kiện sẽ xảy ra trong các ngữ cảnh khác nhau. Khi
người sử dụng di chuyển chuột sự kiện “mouse move” sẽ được thi hành.Phương thức tĩnh
gevent.addListener() được sử dụng để thông báo mỗi khi các sự kiện xảy ra. Phương thức
này chỉ ra một đối tượng, một sự kiện được lắng nghe và một hàm được khi sự kiện
tương ứng xảy ra. Ví dụ dưới đây sẽ đưa ra một thông báo mỗi khi người sử dụng bấm
vào bản đồ
Hình 3: Bắt sự kiện khi click vào bản đồ
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
GEvent.addListener(map, "click", function() {
alert("You clicked the map.");
});
Listener có khả năng nắm bắt ngữ cảnh của sự kiện. Đoạn code dưới đây sẽ hiển thị
kinh độ và vĩ độ của phần trung tâm của bản đồ.
var map = new GMap2(document.getElementById("map"));
GEvent.addListener(map, "moveend", function() {
var center = map.getCenter();
document.getElementById("message").innerHTML =
center.toString();
});
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
2.2.2. Using
Closures in Event Listeners (Sử dụng Closuress trong lắng nghe

sự kiện)
Khi thực thi “even listenner” sẽ rất dễ dàng nếu như đối tượng đó có chứa dữ liệu
trong nó. Javascipt không hỗ trợ trường hợp dữ liệu đã được đóng gói nhưng nó hỗ trợ
hàm closure() cho phép các hàm nội tại truy cập đến các biến bên ngoài. Các even
listener() sử dụng hàm này để truy cập các biến thường không nằm trong các đối tượng
của sự kiện đó. Đoạn code dưới đây sử dụng hàm closure() để gán một thông điệp bí mật
vào một tập hợp marker khi bấm vào mỗi marker sẽ hiện thị một phần của thông điệp bí
mật đó. Phần thông điệp này không nằm trong nội tại của marker.
Hình 4: Sử dụng Closuress trong lắng nghe sự kiện
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// Creates a marker at the given point
// The five markers show a secret message when clicked
// but that message is not within the marker's instance data
function createMarker(point, number) {
var marker = new GMarker(point);
var message = ["This","is","the","secret","message"];
marker.value = number;
GEvent.addListener(marker, "click", function() {
var myHtml = "<b>#" + number + "</b><br/>" + message[number
-1];
map.openInfoWindowHtml(point, myHtml);
});
return marker;
}
// Add 5 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();

var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 5; i++) {
var point = new GLatLng(southWest.lat() + latSpan *
Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(createMarker(point, i + 1));
}
2.2.3. Using
Passed Arguments in Events (Truyền tham số trong sự kiện)
Ta có thể truyền tham số vào các sự kiện. Đoạn code dưới đây, sự kiện “click” trên
bản đồ truyền 2 tham số overlay và point.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
// ground overlay
GEvent.addListener(map,"click", function(overlay,point) {
var myHtml = "The GPoint value is: " +
map.fromLatLngToDivPixel(point) + " at zoom level " +
map.getZoom();
map.openInfoWindow(point, myHtml);
});
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
.2.3. ConTrol(Điều khiển)
2.3.1. Controls
Overview (Tổng quan về điều khiển)
Bạn có thể sử dụng một số công cụ có sẵn của Map API trong bản đồ của mình
 GlargeMapControl: Có những nút lớn dùng để di chuyển hình ảnh, phóng
to hoặc thu nhỏ bản đồ.
 GSmallMapControl: Có những nút nhỏ dùng để di chuyển hình ảnh,
phóng to hoặc thu nhỏ bản đồ.

 GsmallZoomControl:
 GscaleControl: có thể Co dãn bản đồ
 GMapTypeControl: Các nút cho phép người sử dụng chuyển đổi giữa các
loại bản đồ
 GHierarchicalMapTypeControl - a selection of nested buttons and menu
items for placing many map type selectors.
 GOverviewMapControl - Một bản đồ tổng quan được xếp lại trong góc
của màn ảnh
Tất cả các điều khiển này được dựa vào đối tượng của GControl
Một số kiểu bản đồ:
 G_NORMAL_MAP : Hiển thị ở dạng bình thường, thương là kiểu bản đồ
2D của Google Maps
 G_SATELLITE_MAP: Hiển thị hình ảnh chụp từ vệ tinh
 G_HYBRID_MAP : Hiển thị hình ảnh chụp từ vệ tinh kết hợp với những
thực thể nổi bật như (đường, tên thành phố.)
 G_PHYSICAL_MAP : Hiển thị bản đồ địa lý dựa vào thông tin địa thế.
Theo mặc định, Google Maps API cung cấp 3 loại bản đồ : G_NORMAL_MAP,
G_SATELLITE_MAP và G_HYBRID_MAP. Bản có thể thay đổi nó qua 2 hàm do
Google Map cung cấp là GMAP2.removeMapType() hoặc GMAP2.addMapType()
Đoạn code dưới đây loại bỏ kiểu bản đồ G_HYBRID_MAP từ những kiểu bản đồ
sẵn có. Khi ta gọi hàm GmapTypeControl chỉ có 2 kiểu bản đồ G_NORMAL_MAP và
G_SATELLITE được hiển thị
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.removeMapType(G_HYBRID_MAP);
map.setCenter(new GLatLng(42.366662,-71.106262), 11);
var mapControl = new GMapTypeControl();
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
2.3.2. Adding

Controls to the Map(Thêm 1 điều khiển lên bản đồ)
Thêm những điều khiển bản đồ với Gmap2 phương thức addControl().Ví dụ bạn
thêm điều khiển lấy toàn cảnh của bản đồ
map.addControl(new GLargeMapControl());
Bạn có thể thêm nhiều điều khiển vào một bản đồ. Trong trường hợp này chúng ta
sử dụng các điều khiển có sẵn là GsmallMapControl() và GmapTypeControl() cho phép
quyết, phóng to thu nhỏ bản đồ và chuyển đổi giữa 2 kiểu Map và Statellite.
Hình 5: Thêm 1 điều khiển lên bản đồ
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
2.3.3. Positionin
g Controls on the Map(Vị trí điều khiển trên bản đồ)
Phương thức addControl() với tham số thứ 2 tuỳ chọn GcontrolPosition cho phép
bạn xác định vị trí của điều khiển trên bản đồ. Dưới dây là một số giá trị thích hợp cho
tham số này
G_ANCHOR_TOP_RIGHT
G_ANCHOR_TOP_LEFT
G_ANCHOR_BOTTOM_RIGHT
G_ANCHOR_BOTTOM_LEFT
Nếu như không sử dụng các giá trị này thì Map API sẽ sử dụng vị trị mặc định được
xác định bởi điều khiển đó. GcontrolPosition có thể xác định offset có thể chỉ ra bao
nhiêu pixel từ các chiều của bản đồ tới vị trí của điều khiển. Offset này được xác định bởi
đối tượng Gsize.
Ví dụ này thêm điều khiển GmapTypeControl vào góc trên bên phải của bản đồ với
độ cách của các chiều là 10 pixel. Click dobuble vào mọi chỗ trên bản đồ sẽ chuyển điều
khiển này xuống góc dưới bên phải bản đồ
var map = new GMap2(document.getElementById"map_canvas"));
var mapTypeControl = new GMapTypeControl();

var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new
GSize(10,10));
var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new
GSize(10,10));
map.addControl(mapTypeControl, topRight);
GEvent.addListener(map, "dblclick", function() {
map.removeControl(mapTypeControl);
map.addControl(new GMapTypeControl(), bottomRight);
});
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
2.3.4. Modifying
the Makeup of Standard Controls (Sửa chữa và tạo ra những
điều khiển chuẩn)
Hầu hết các điều khiển trong Google Map API chứa những phương thức xử lý
chuẩn. Tuy nhiên một số điều khiển đòi hỏi khởi tạo cho mục đích sử dụng thích hợp. Ví
dụ điều khiển GhierarchicalMapTypeConTrol yêu cầu 1 số hàm khởi tạo để hiện thị các
loại bản đồ bên trong “menu” với một trình tự thích hợp
Ở ví dụ này sẽ vé sẵn 1 lưới bản đồ ở dưới sau đó tạo ra
GhierarchicalMapTypeControl để sắp xếp các đối tượng bản đồ phủ lên trên.
Hình 6: Sửa chữa và tạo ra những điều khiển chuẩn
// define the crosshair tile layer and its required functions
var crossLayer = new GTileLayer(new GCopyrightCollection(""), 0,
15);
crossLayer.getTileUrl = function(tile, zoom) {
return "./include/tile_crosshairs.png";
}
crossLayer.isPng = function() {return true;}
// Create a new map type incorporating the tile layer
var layerTerCross = [ G_PHYSICAL_MAP.getTileLayers()[0],

crossLayer ];
var mtTerCross = new GMapType(layerTerCross,
G_PHYSICAL_MAP.getProjection(), "Ter+");
var map = new GMap2(document.getElementById("map_canvas"),
{ size: new GSize(640,320) } );
map.addMapType(G_PHYSICAL_MAP);
map.addMapType(mtTerCross);
map.setCenter(new GLatLng(37.4419, -122.1419), 4);
var mapControl = new GHierarchicalMapTypeControl();
// Set up map type menu relationships
mapControl.clearRelationships();
mapControl.addRelationship(G_SATELLITE_MAP, G_HYBRID_MAP,
"Labels", false);
mapControl.addRelationship(G_PHYSICAL_MAP, mtTerCross,
"Crosshairs");
// Add control after you've specified the relationships
map.addControl(mapControl);
map.addControl(new GLargeMapControl());
2.3.5. Custom
Map Controls (Điều khiển bản đồ tuỳ chọn)
Google Map API cho phép cung tạo ra các điều khiển bản đồ tuỳ ý bằng lớp con
Gcontrol. Để tạo ra 1 điều khiển khả dụng, bạn phải định nghĩa bộ xử lý cho ít nhât là 2
phương thức trong lớp initalize() và getDefaultPostition(). Phương thức initalize() phải
trả giá trị DOM element. Trong khi phương thức getDefaultPosition() phải trả đối tượng
có kiểu GcontrolPosition
Trong ví dụ này ta tạo ra một điều khiển căn chỉnh kích thước đơn giản sử dụng
các link ký tự chứ ko dùng các biểu tượng đồ hoạ giống như trong Google Map
Hình 7: Điều khiển bản đồ tuỳ chọn
function TextualZoomControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TextualZoomControl.prototype = new GControl();
// Creates a one DIV for each of the buttons and places them in
a container
// DIV which is returned as our control element. We add the
control to
// to the map container and return the element for the map class
to
// position properly.
TextualZoomControl.prototype.initialize = function(map) {
var container = document.createElement("div");
var zoomInDiv = document.createElement("div");
this.setButtonStyle_(zoomInDiv);
container.appendChild(zoomInDiv);
zoomInDiv.appendChild(document.createTextNode("Zoom In"));
GEvent.addDomListener(zoomInDiv, "click", function() {
map.zoomIn();
});
var zoomOutDiv = document.createElement("div");
this.setButtonStyle_(zoomOutDiv);
container.appendChild(zoomOutDiv);
zoomOutDiv.appendChild(document.createTextNode("Zoom Out"));
GEvent.addDomListener(zoomOutDiv, "click", function() {
map.zoomOut();
});
map.getContainer().appendChild(container);
return container;
}
// By default, the control will appear in the top left corner of

the
// map with 7 pixels of padding.
TextualZoomControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,