Bài 37: Phần tử Google Maps trong HTML5

Phần tử Google Maps cho phép bạn có thể hiển thị các bản đồ trên trang web của mình.

Một trang web cơ bản

Để chứng minh cho việc có thể thêm một bản đồ vào một trang web, chúng tôi sử dụng một trang HTML cơ bản như trong ví dụ dưới đây:

Ví dụ:


<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
</html>

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

Ví dụ dưới đây sẽ giúp các bạn hiểu được cách thiết lập kích thước một bản đồ :

Ví dụ:


<!DOCTYPE html>

<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px;background:yellow"></div>

</body>
</html>

Tạo mới một hàm để thiết lập các thuộc tính của bản đồ

Dưới đây là ví dụ xác định một bản đồ trung tâm ở London:

Ví dụ:


<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px;"></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>

</body>
</html>

Giải thích ví dụ:

Biến mapOptions định nghĩa các thuộc tính của bản đồ.

Thuộc tính center xác định vị trí trung tâm của bản đồ (sử dụng các đường kinh độ và vĩ độ).

Thuộc tính zoom xác định mức độ phóng to hoặc thu nhỏ của bản đồ.

Thuộc tính mapTypeId xác định các kiểu bản đồ được hiển thị. Các loại bản đồ sau đây được hỗ trợ: ROADMAP( bản đồ lộ trình), SATELLITE( bản đồ vệ tinh), HYBRID, and TERRAIN( bản đồ địa hình).

Dòng var map=new google.maps.Map(document.getElementById(“map”), mapOptions); cho phép tạo mới 1 bản đồ trong phần tử <div> với id=”map”, sử dụng các tham số đã được thông qua từ biến mapOptions.

Thêm Google Maps API

Cuối cùng, hiển thị bản đồ lên trang web!

Các chức năng của bản đồ được cung cấp bởi một thư viện JavaScript có trong Google. Để thêm một script hãy tham khảo Google Maps API với các lời gọi hàm đến myMap:

Ví dụ:


<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>

<div id="map" style="width:400px;height:400px;background:yellow"></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?callback=myMap"></script>

</body>
</html>