sử dụng công nghệ .NET trên nền Web 2.0 kết hợp với Google Map API.

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 đồ