Bài 2: Google Maps căn bản
Nội dung
Tạo một Google Map đơn giản
Ví dụ này tạo một bản đồ có vị trí tâm là hồ Hoà Kiếm, Hà Nội:
Ví dụ
<html>
<body>
<h1>Bài đầu tiên tích hợp Google Map</h1>
<div id="map" style="width:100%;height:500px"></div>
<script>
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(21.029502, 105.852465),
zoom: 15
};
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY_CUA_BAN&callback=myMap"></script>
</body>
</html>
Chúng ta sẽ cùng tìm hiểu và giải thích từng dòng lệnh ở phía dưới.
1. Nạp thư viện Google API
Google Maps API là một thư viện JavaScript. Nó có thể được thêm vào trang web ở trong thẻ <script>:
<script src=“http://maps.googleapis.com/maps/api/js”></script>
2. Thiết lập các thuộc tính của Map
Tạo một hàm khởi tạo bản đồ:
function initialize() {
}
Trong hàm khởi tạo này, tạo một đối tượng (mapProp) để định nghĩa các thuộc tính cho bản đồ:
var mapProp = {
center:new google.maps.LatLng( 21.029502, 105.852465),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Thuộc tính center chỉ định vị trí trung tâm của bản đồ là ở đâu. Tạo một đối tượng LatLng để chỉ định điểm trung tâm trên bản đồ. Đặt toạ độ theo thứ tự: latitude (vĩ độ), longitude (kinh độ).
Thuộc tính zoom xác định mức độ phóng to của bản đồ. Với zoom: 0 hiển thị bản đồ thu nhỏ. Mức zoom cao hơn sẽ hiển thị chi tiết bản đồ hơn.
Thuộc tính mapTypeId xác định kiểu hiển thị của bản đồ. Các loại bản đồ được hỗ trợ:
- ROADMAP (bản đồ thường, mặc định là bản đồ 2D)
- SATELLITE (bản đồ chụp từ vệ tinh)
- HYBRID (bản đồ vệ tinh + tên của các con đường và thành phố)
- TERRAIN (bản đồ về địa hình như núi, sông, v.v.)
3. Tạo nơi chứa bản đồ (container)
Sử dụng phần từ <div> để đặt bản đồ. Dùng CSS để định kích thước của phần tử:
<div id="googleMap" style="width:500px;height:380px;"></div>
 |
Bản đồ sẽ thừa kế kích thước từ phần từ chứa nó. |
|---|
4. Tạo đối tượng bản đồ
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
Đoạn code ở trên tạo một bản đồ mới bên trong phần tử <div> với id=”googleMap” mà sử dụng các tham số đã thiết lập (mapProp).
5. Thêm sự kiện Listener đề nạp bản đồ
Thêm một DOM listener mà sẽ thực thi hàm initialize() khi nạp cửa sổ (khi trang đã được nạp):
google.maps.event.addDomListener(window,'load', initialize);
Nạp dữ liệu không đồng bộ
Google Maps có thể thực hiện việc nạp dữ liệu từng phần khi có yêu cầu.
Ví dụ bên dưới sử dụng sự kiện window.onload để nạp Google Maps API sau khi trang đã được nạp đầy đủ.
Hàm loadScript() tạo một thẻ với một tham biến callback=initialize được thêm vào cuối của URL để thực thi hàm initialize() sau khi API đã được nạp đầy đủ:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY_CUA_BAN"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(21.029502, 105.852465),
zoom:15,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Hiển thị nhiều bản đồ
Ví dụ bên dưới hiển thị bốn bản đồ trên cùng một trang web (bốn bản đồ với các kiểu khác nhau):
Ví dụ
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY_CUA_BAN"></script>
<script>
function initialize() {
var mapProp1 = {
center:new google.maps.LatLng(21.029502, 105.852465),
zoom:7,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center:new google.maps.LatLng(21.029502, 105.852465),
zoom:7,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center:new google.maps.LatLng(21.029502, 105.852465),
zoom:7,
mapTypeId:google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center:new google.maps.LatLng(21.029502, 105.852465),
zoom:7,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map1=new google.maps.Map(document.getElementById("googleMap1"),mapProp1);
var map2=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3=new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4=new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap1" style="width:500px;height:380px;"></div>
<div id="googleMap2" style="width:500px;height:380px;"></div>
<div id="googleMap3" style="width:500px;height:380px;"></div>
<div id="googleMap4" style="width:500px;height:380px;"></div>
</body>
</html>
Google API Key
Google cho phép website của bạn có thể gọi nhiều lần thư viện API của Google.
Có thể liên qua đến vấn đề băng thông, bạn nên đăng ký một API miễn phí từ google để có thể sử dụng riệng cho ứng dụng của bạn.
Truy cập https://console.developers.google.com để nhận một key miễn phí.
Google Maps sẽ tìm API key trong tham số key khi nạp thư viện API:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
