Bắt đầu với Google Maps
Bài viết này sẽ trình bày giới thiệu về Google Maps cũng như các bước để có thể sử dụng Google Maps API.
Google Maps là gì?
Google Maps là một dịch vụ bản đồ miễn phí của Google, cung cấp nhiều thông tin địa lý. Sử dụng Google Maps, bạn có thể:
- Tìm kiếm địa điểm, chỉ đường từ nơi này đến nơi nào đó.
- Xem và điều hướng bản đồ
- Nhận thông tin cụ thể như giao thông của một địa điểm, ...
Google Maps cung cấp API cho phép bạn tùy chỉnh bản đồ và hiển thị chúng trên trang web của bạn.
Các bước nạp bản đồ trên web của bạn
Làm theo các bước sau đây, bạn có thể hiển thị bản đồ trên trang web của bạn:
Bước 1: Tạo trang HTML
Tạo một trang HTML đơn giản với đoạn mã dưới đây:
<!DOCTYPE html> <html> <head> </head> <body> .............. </body> </html>
Bước 2: Nạp API
Sử dụng thẻ script để nạp Google Maps API như sau:
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>
Bước 3: Tạo khung chứa
Để hiển thị bản đồ, chúng ta tạo một khung chứa bản đồ, như là:<div id = "sample" style = "width:900px; height:580px;"></div>
Bước 4: Tùy chọn chế độ bản đồ
Trước khi khởi tạo bản đồ, chúng ta cần quy định chế độ của bản đồ. Google Maps có 3 chế độ như sau:
- centre: Với thuộc tính này, chúng ta cần xác định vị trí nơi mà chúng ta muốn làm trung tâm bản đồ. Để thiết lập vị trí đó, chúng ta khởi tạo một đối tương latlng với giá trị tọa độ của đối tượng.
- zoom: Thuộc tính này quy định mức độ phóng to của bản đồ.
- maptypeid: Thuộc tính này xác định kiểu bản đồ mà ta muốn hiển thị. Google Map cung cấp những chế độ hiển thị sau:
- ROADMAP (Lộ trình, kiểu đồ họa 2D)
- SATELLITE: Kiểu vệ tinh
- HYBRID: Kết hợp 2 hay nhiều kiểu khác nhau
- TERRAIN: Kiểu địa hình có núi, sông, hồ, ...
Những thiết lập tùy chọn này ta đặt vào trong hàm loadMap() như sau:
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(9.613299, 105.970785),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}
Bước 5: Tạo một đối tượng bản đồ:
Bạn có thể tạo một đối tượng bản đồ như sau:var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
Bước 6: Nạp bản đồ
Để nạp bản đồ, chúng ta gọi hàm loadMap() vừa xây dựng:
google.maps.event.addDomListener(window, 'load', loadMap);
hoặc
<body onload = "loadMap()">
Ví dụ
Bạn hãy thử với ví dụ sau:
Ví dụ
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(9.613299, 105.970785),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
Xem kết quả »
Bình luận