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.
Nội dung
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>
Đọc thêm các bài về Google Maps API
Đọc thêm các bài về sử dụng google maps tại đây
