Kết nối

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

581 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.

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ệ.

Bình luận Facebook

2
Để lại bình luận

avatar
1000
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Các tác giả bình luận
[HTML/HTML5] Phần 42: Đa phương tiện | | DAMMIO[HTML/HTML5] Phần 40: Phần tử SVG trong HTML5 | | DAMMIO Các tác giả bình luận gần đây
  Theo dõi  
mới nhất cũ nhất được bình chọn nhiều nhất
Thông báo của
trackback

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

trackback

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