Bài
1: Google Maps API cơ bản
Cho
phép bạn hiển thị bản đồ đường đi trên website của
bạn.
Google Maps API (Application
Programming Interface)
Phần hướng dẫn này tôi viết
về lập trình Google Maps API.
Tôi mặc định các bạn đã biết
về HTML + JavaScript (bạn nào chưa biết HTML hay JavaScript
vui lòng xem lại phần hướng dẫn HTML, JavaScript).
Môi trường soạn thảo (IDE) bạn
dùng gì cũng được (tôi xài Notepad++) miễn nó có hỗ
trợ ngôn ngữ Java Script và có tô màu cho dễ nhìn càng
hay.
Google Maps API cho phép bạn tùy
biến bản đồ (tất nhiên của Google) và thông tin hiển
thị trên bản đồ.
API là 1 tập hợp các hàm và
phương thức có thể được sử dụng để viết chương
trình phần mềm.
GOOGLE MAPS CƠ BẢN
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(10.854512, 106.640425),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window,'load', initialize);</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Phần
giải thích
Bước 1: Thêm thư viện Google
API vào trang web
Thư viện Google Maps API là 1 thư
viện viết bằng Java Script.Ta thêm vào phần <head></head>
của trang web bằng thẻ
<script src="http://maps.googleapis.com/maps/api/js"></script>
Bước
2: Thiết lập các thuộc tính của bản đồ
Tạo
hàm thiết lập bản đồ
function
initialize() {
}
}
Trong
hàm này bạn tạo 01 đối tượng (mapProp) để thiết lập
các thuộc tính của bản đồ
var mapProp
= {
center:new google.maps.LatLng(10.854512, 106.640425),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
center:new google.maps.LatLng(10.854512, 106.640425),
zoom: 9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
center:
xác
định tâm điểm của bản đồ.Đối tượng LatLng
để xác định tọa độ chính xác của tâm điểm
(latitude:vĩ
độ, kinh độ:longitude).
Để
biết tọa độ của 1 vị trí bất kỳ, mở Google Maps->
nhấp phải lên bản đồ chọn Đây là gì? (What is
here?)
Zoom:
độ phóng đại (số càng lớn càng gần)
mapTypeId:
loại bản đồ
- ROADMAP (bản đồ 2D mặc định)
- SATELLITE (bản đồ hình vệ tinh)
- HYBRID (hình vệ tinh + đường sá và tên thành phố)
- TERRAIN (bản đồ địa hình đồi núi,sông ngòi,...)
Bước
3: Tạo thẻ HTML chứa bản đồ
Tạo
1 thẻ <div> để chứa bản đồ. Sử dụng CSS định
kích thước thẻ (cũng là kích thước bản đồ):
<div id="googleMap" style="width:500px;height:380px;"></div>
Bước
4: Tạo 01 đối tượng Map
var map=new google.maps.Map(document.getElementById("googleMap"),
mapProp);
Đoạn
code trên tạo 1 bản đồ mới trong thẻ HTML có
id=”googleMap” dùng tham số là mapProp đã khai báo ở
trên.
Bước
5: Thêm vào 1 sự kiện(eventListener) để tải bản đồ
lúc website bắt đầu load
google.maps.event.addDomListener(window, 'load',
initialize);
Ngoài ra, bạn cũng có thể gọi
thư viện hàm Google API bằng cách dùng hàm (đặt ở
<body> hay <head> đều được). Sau đó dùng sự
kiện window.onload để gọi hàm này
function loadScript() {
var script
= document.createElement("script");
script.src
= "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload
= loadScript;
Và
đây là thành quả cuối cùng
Xem
video clip Bài 1: Google Maps là gì
<<video
>>
Không có nhận xét nào:
Đăng nhận xét