Google Maps trong HTML - Fedu

Google Maps cho phép hiển thị bản đồ trên trang web của bạn:

Trang web cơ bản

Để tìm hiểu làm thế nào thêm bản đồ Google vào trang web, chúng tôi sẽ sử dụng một trang HTML cơ bản:

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

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

</body>
<html>

Đặt kích thước bản đồ

Đặt kích thước của bản đồ như sau:

<div id=”map” style=”width:400px;height:400px”>

Tạo chức năng để thiết lập các thuộc tính bản đồ

Ví dụ này định nghĩa một Google Map tập trung ở London, Anh:

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);
}

Giải thích ví dụ trên:

Biến mapOptions xác định các thuộc tính cho bản đồ.

Thuộc tính center chỉ định vị trí trung tâm bản đồ (sử dụng vĩ độ và kinh độ).

Thuộc tính zoom xác định mức thu phóng cho bản đồ (thử thử với mức thu phóng).

Thuộc tính mapTypeId chỉ định loại bản đồ để hiển thị. Các loại bản đồ sau đây được hỗ trợ: ROADMAP, SATELLITE, HYBRID và TERRAIN.

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

Thêm API Google Maps

Cuối cùng, hiển thị bản đồ trên trang. Chức năng của bản đồ được cung cấp bởi thư viện JavaScript có tại Google. Thêm một kịch bản để tham khảo API Google Maps với một gọi lại cho chức năng myMap:

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