Google Maps cơ bản
Tạo một bản đồ Google cơ bản
Ví dụ này tạo Google Map tập trung ở London, Anh:
Ví 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ả ví dụ trên, từng bước một.
Vùng chứa và kích thước bản đồ
Bản đồ cần một phần tử HTML để giữ bản đồ:
<div id="googleMap" style="width:100%;height:400px"></div>
Cũng thiết lập kích thước của bản đồ.
Tạo một hàm để thiết lập 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 tọa độ vĩ độ và kinh độ).
Thuộc tính thu phóng chỉ định mức thu phóng cho bản đồ (thử thử nghiệm 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> có 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:
Ví 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.
Hã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 dự kiến sẽ tìm thấy khóa API trong tham số khóa khi tải API:
<script src="https://maps.googleapis.com/maps/api/js? key=YOUR_KEY &callback=myMap"></script>