Kết nối

[HTML/HTML5] Phần 41: Thể hiện bản đồ Google trong HTML

8.159 lượt xem 
 
Thể loại: HTML/HTML5 

Trong bài này, chúng ta sẽ nhúng bản đồ Google (Google Maps) vào trang web thông qua các bước như sau.

Tạo trang cơ bản

Đầu tiên, bạn tạo một trang web cơ bản với nội dung.

<!DOCTYPE html>
<html>
<body>

<h1>Bản đồ Google Map --- dammio.com</h1>

<div id="map">Bản đồ sẽ được hiển thị ở đây</div>

</body>
<html>

Thiết lập kích thước bản đồ

Ở phần tử div có id = “map” bạn có thể dùng thẻ style để thiết lập kích thước bản đồ.

<div id="map" style="width:600px;height:450px">

Tạo một hàm để thiết lập các thuộc tính

Tiếp đến, bạn cần tạo 1 hàm JavaScript để định nghĩa vị trí hiển thị bản đồ. Bản đồ sẽ lấy vị trí này làm trung tâm khi hiển thị. Để định nghĩa vị trí trung tâm là thủ đô Luân Đôn nước Anh, hãy xem ví dụ sau.

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

Trong đó, mapOptions là biến định nghĩa các thuộc tính bản đồ. Thuộc tính center thiết lập tọa độ (51.2, -0.12) sẽ là vị trí trung tâm. Chế độ zoom của bản đồ là 10. Thuộc tính mapTypeId mô tả dạng bản đồ cần hiển thị. Các dạng bản đồ được hỗ trợ bao gồm: ROADMAP (đường xá), SATELLITE (vệ tinh), HYBRID (dạng lai nhiều dạng khác), và TERRAIN (địa hình).

Dòng var map=new google.maps.Map(document.getElementById(“map”), mapOptions); để tạo bản đồ mới bên trong phần tử div với id=”map”.

Thêm Google Maps API

Chức năng bản đồ được cung cấp bởi một thư viện JavaScript nằm ở Google. Bạn thêm đoạn mã để tham chiếu đến Google Maps API với một callback tới hàm myMap.

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

Tạo khóa Google API

Google cho phép một website sử dụng Google API miễn phí, khoảng vài nghìn lần 1 ngày. Đầu tiên, bạn vào Google Console để đăng ký và lấy 1 khóa miễn phí. Bạn có thể xem hướng dẫn ở đây. Sau đó, bạn chỉ cần nhúng vào ứng dụng đoạn mã JavaScript như phần trên với định dạng:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

Trong đó, YOUR_KEY là khóa mà bạn lấy được từ Google và myMap là hàm JavaScript bạn đã tạo.

Liên quan:  [HTML/HTML5] Phần 15: Hình ảnh trong HTML

Ví dụ hoàn chỉnh

Cuối cùng, đây là ví dụ hoàn chỉnh. Lưu ý, bạn phải có một khóa Google API để sử dụng.

<!DOCTYPE html>
<html>
<body>
 
<h1>Bản đồ Google Map --- dammio.com</h1>
 
<div id="map" style="width:400px;height:400px;background:yellow">Bản đồ sẽ được hiển thị ở đây</div>

<script>
function myMap() {
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.12),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<!--
Để dùng chức năng Google Maps, bạn phải lấy một khóa API miễn phí từ Google. Xem các bước hướng dẫn ở trên.
-->

</body>
</html>

Nhúng Google Maps từ ứng dụng thứ 3

Nếu bạn không thể nào lấy được khóa Google API hoặc thấy cách này rắc rối, bạn có thể nhúng bản đồ Google từ bên thứ 3, chẳng hạn như Maps Website hay Embed Google Map.

Kết luận: Thông qua bài này, bạn đã học cách nhúng bản đồ Google Maps vào website của riêng mình. Bạn có thể sử dụng Google Maps để giúp người dùng có thể dễ dàng tìm được địa chỉ của bạn để liên hệ.

Trích dẫn bài viết
  • APA:
    Dammio. (2018). [HTML/HTML5] Phần 41: Thể hiện bản đồ Google trong HTML. https://www.dammio.com/2018/06/06/html-html5-phan-41-the-hien-ban-do-google-trong-html.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[HTML/HTML5] Phần 41: Thể hiện bản đồ Google trong HTML},
    year = {2018},
    url = {https://www.dammio.com/2018/06/06/html-html5-phan-41-the-hien-ban-do-google-trong-html},
    urldate = {2024-03-14}
    }
Theo dõi
Thông báo của
guest
2 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
elyspa
4 năm trước

Mình cần làm bản đồ cho trang https://elyspa.vn/ nhưng đọc k hiểu bạn có thể hướng dẫn k ạ

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x