Google Map Window - Display Marker Info Window - Google Maps
Đối tượng (Object) Info Window dùng để hiển thị một cửa sổ thông tin nằm trên bản đồ Google Map, nó thường được dùng để hiển thị thông tin của Marker. Tuy nhiên ta có thể sử dụng nó để hiển thị thông tin tại một vị trí vĩ độ + kinh độ (latitude/longitude) nao đó trong bản đồ googme map. ...
Đối tượng (Object) Info Window dùng để hiển thị một cửa sổ thông tin nằm trên bản đồ Google Map, nó thường được dùng để hiển thị thông tin của Marker. Tuy nhiên ta có thể sử dụng nó để hiển thị thông tin tại một vị trí vĩ độ + kinh độ (latitude/longitude) nao đó trong bản đồ googme map. Từ đó ta tóm lại cửa sổ thông tin (info window) trong google map dùng để hiển thị một thông tin nào đó và nó được hiển thị ở mức z-index cao nhất, vì thế nó luôn nằm trên bản đồ nhằm giúp người dùng được được. Bạn vào link này để xem thêm các thuộc tính của nó nhé.
1. Thêm một cửa sổ thông tin ( Add an info window )
InfoWindow được khởi tạo bởi các thông số InfoWindowOptions gồm:
- content: nội dung muốn hiển thị, có thể sử dụng m.
- pixelOffset: Vị trí các đỉnh của cửa sổ được neo, thông số này thường để mặc định
- position: đối tượng LatLng gồm hai thông số tung độ và vỹ độ ()
- maxWidth: Chiều rộng tối đa của cửa sổ và tính theo Pixel
Thông thường nếu bạn muốn nội dung content của Info Window rõ ràng thì bạn nên đặt nó bao ngoài bởi một thẻ DIV, và bên trong thẻ DIV bạn có thể đặt thêm các đoạn mã HTML khác. Như vậy giao diện cửa sổ thông báo nhìn sẽ đẹp và ít lỗi hơn.
Góp ý: Nếu bản đồ của bạn có quá nhiều cửa sổ thì lúc hiển thị ra nó sẽ chiếm không gian của bản đồ, vì thế các cửa sổ thông tin bạn nên ẩn nó đi rồi tạo các sự kiện khi click vào rồi mới hiển thị. Như vậy nhìn bản đồ sẽ rất thoáng, thay vì hiển thị một loạt các InfoWindow thì chỉ show các Control quản lý.
Ví dụ: Xem demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#content{
padding: 20px;
color:red
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
function initialize()
{
var myLatlng = new google.maps.LatLng(10.771971, 106.697845);
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
content: '<div id="content">Welcome to <a href="https://Zaidap.com.net">Zaidap.com.net</a> <br/> Đây là chợ bến thành</div>',
position : myLatlng
});
// Hàm Open dùng để mở window
infowindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
2. Mở một cửa sổ window ( Open an info window )
Ở phần Add an info window ta chỉ tìm hiểu cách tạo một Object Info Window chứ chưa có hiển thị lên màn hình, dù trong ví dụ có hiển thị nhưng lúc đó chỉ là tạm thời chấp nhận hàm open đó :D. Nên trong phần này ta sẽ tìm hiểu cú pháp nó chi tiết hơn.
Cú pháp: infowindow.open(map, control);
Trong đó:
- map: là map sẽ hiển thị
- control: gắn vào control nào, thường là Marker
Ví dụ: Trong ví dụ này khi click vào Marker sẽ hiển thị thông tin cửa sổ. Nếu bạn chưa biết sự kiện thì đọc bài Google Map Events.
Xem demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#content{
padding: 20px;
color:red
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script>
function initialize()
{
var myLatlng = new google.maps.LatLng(10.771971, 106.697845);
var mapOptions = {
zoom: 12,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow({
content: '<div id="content">Welcome to <a href="https://Zaidap.com.net">Zaidap.com.net</a> <br/> Đây là chợ bến thành</div>',
position : myLatlng
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hồ Chí Minh Việt Nam'
});
// Khi click vào Marker thì hiển thị
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
3. Tắt Cửa Sổ Window ( Close an info window )
Để tắt một cửa sổ InfoWindow thì ta dùng hàm Close().
Ví dụ: infowindow.close()
4. Thay đổi vị trí của window (Change position Info Window)
Để thay đổi vị trí của infowindow thì ta sẽ có hai cách:
- Cách 1: dùng hàm setPosition()
- Cách 2: Dùng hàm open() để tạo mới một marker
Trong phần này tôi sẽ không đưa ra ví dụ vì thực sự nó cũng đơn giản, chỉ cần các bạn nắm phần 1,2 là mọi thứ ok cho phần 3,4 rồi.
5 Lời kết
Bài này tôi thấy cũng hấp dẫn không kém bài Marker. Và ở những bài tiếp theo sẽ không kém phần như bài này nên các bạn theo dõi nhé :D
