Bài viết này chúng ta sẽ cùng nhau tìm hiểu khải niệm Google Map là gì và cùng nhau tìm hiểu tổng quan về lập trình Google Map
Bài viết này chúng ta sẽ cùng nhau tìm hiểu khải niệm Google Map là gì và cùng nhau tìm hiểu tổng quan về lập trình Google Map
Mục lục
Google Map là gì?
Google Maps là một dịch vụ lập bản đồ web miễn phí của Google cung cấp nhiều loại thông tin địa lý khác nhau. Sử dụng Google Maps, người ta có thể.
- Tìm kiếm địa điểm hoặc nhận chỉ đường từ nơi này đến nơi khác.
- Xem và điều hướng thông qua hình ảnh mức độ đường phố toàn cảnh ngang và dọc của các thành phố khác nhau trên thế giới.
- Nhận thông tin cụ thể như lưu lượng truy cập tại một điểm cụ thể.
Google Maps cung cấp API sử dụng mà bạn có thể tùy chỉnh bản đồ và thông tin được hiển thị trên chúng. Phần này mình sẽ giải thích cách tải Google Map đơn giản trên trang web của bạn bằng HTML và JavaScript.
Các bước chạy Google Map trên trang web
Thực hiện theo các bước được cung cấp dưới đây để tải bản đồ trên trang web của bạn :
Bước 1 : Tạo 1 trang HTML
Tạo một trang HTML cơ bản với các thẻ head và body như hiển thị bên dưới –
<!DOCTYPE html> <html> <head> </head> <body> .............. </body> </html>
Bước 2 : Chạy API Google Map
Tải hoặc bao gồm API Google Maps bằng thẻ tập lệnh như được hiển thị bên dưới –
<!DOCTYPE html>
<html>
<head>
<script src = "https://kungfuphp.com/wp-content/litespeed/localres/maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>Bước 3: Tạo Container
Để chạy bản đồ, chúng ta phải tạo một phần tử container, thường là thẻ <div> được sử dụng cho mục đích này. Tạo một phần tử div và xác định kích thước của nó như hiển thị bên dưới –
<div id = "sample" style = "width:900px; height:580px;"></div>
Bước 4 : Map Options
Trước khi khởi tạo bản đồ, chúng ta phải tạo một đối tượng mapOptions và đặt các giá trị cho các biến khởi tạo bản đồ. Một bản đồ có ba tùy chọn chính là centre , zoom và maptypeid.
centre – Theo thuộc tính này, chúng tôi phải chỉ định vị trí mà chúng tôi muốn căn giữa bản đồ. Để vượt qua vị trí, chúng ta phải tạo một đối tượng LatLng bằng cách chuyển vĩ độ và kinh độ của vị trí cần thiết cho hàm tạo.
zoom – Trong thuộc tính này, chúng tôi phải chỉ định mức thu phóng của bản đồ.
maptypeid − Theo thuộc tính này, chúng tôi phải chỉ định loại bản đồ mà chúng tôi muốn. Sau đây là các loại bản đồ được cung cấp bởi Google
- ROADMAP (bình thường, bản đồ 2D mặc định)
- SATELLITE (bản đồ chụp ảnh)
- HYBRID (kết hợp hai hoặc nhiều loại khác)
- TERRAIN (bản đồ với núi, sông, v.v.)
Trong một hàm, giả sử, loadMap(), tạo đối tượng mapOptions và đặt các giá trị bắt buộc cho centre, zoom và mapTypeId như hiển thị bên dưới.
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}Bước 5 : Tạo Map Object
Bạn có thể tạo bản đồ bằng cách khởi tạo lớp JavaScript có tên là Map. Trong khi khởi tạo lớp này, bạn phải truyền vào mã ID của thẻ div HTML để hiển thị bản đồ và các tùy chọn bản đồ Map Options cho bản đồ được. Tạo một đối tượng bản đồ như code dưới đây.
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);Bước 6 : Chạy bản đồ
Cuối cùng tải bản đồ bằng cách gọi phương thức loadMap () hoặc thêm DOM Listener
google.maps.event.addDomListener(window, 'load', loadMap);
hoặc
<body onload = "loadMap()">Bước 7 : Toàn bộ code hiển thị bản đồ sẽ như sau
Live Demo
<!DOCTYPE html>
<html>
<head>
<script src = "https://kungfuphp.com/wp-content/litespeed/localres/maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
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>Bản đồ được xuất ra bản đồ sẽ như sau :
Kết thúc bài 1 giới thiệu về Google Map là gì và cách khởi chạy lập trình 1 ứng dụng Google Map như thế nào.
Nếu bạn có bất kỳ thắc mắc nào để lại bình luận bên dưới mình sẽ giải đáp nhé!
Good Luck!