Google Maps Basic
Tạo bản đồ Google cơ bản
Ví dụ này tạo một Bản đồ Google có tâm ở Luân Đôn, Anh:
Thí dụ
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
Phần còn lại của trang này mô tả từng bước ví dụ trên.
Kích thước và vùng chứa bản đồ
Bản đồ cần một phần tử HTML để giữ bản đồ:
<div id="googleMap" style="width:100%;height:400px"></div>
Đồng thời đặt kích thước của bản đồ.
Tạo một chức năng để đặt thuộc tính bản đồ
function myMap() {
var mapProp = {
center:new
google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
Biến mapProp xác định các thuộc tính cho bản đồ.
Thuộc tính center chỉ định vị trí căn giữa bản đồ (sử dụng vĩ độ và kinh độ).
Thuộc tính thu phóng chỉ định mức thu phóng cho bản đồ (hãy thử thử nghiệm với mức thu phóng).
Dòng: var map = new google.maps.Map (document.getElementById ("googleMap"), mapProp); tạo một bản đồ mới bên trong phần tử <div> với id = "googleMap", sử dụng các tham số được truyền (mapProp).
Nhiều bản đồ
Ví dụ dưới đây xác định bốn bản đồ với các loại bản đồ khác nhau:
Thí dụ
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
Khóa API Google miễn phí
Google cho phép một trang web gọi bất kỳ API Google nào miễn phí, hàng nghìn lần mỗi ngày.
Truy cập https://developers.google.com/maps/documentation/javascript/get-api-key để tìm hiểu cách lấy khóa API.
Google Maps hy vọng sẽ tìm thấy khóa API trong thông số khóa khi tải một API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>