หัวข้อนี้เราจะมากล่าวถึงการแสดงข้อความออกมาบนแผนที่ หรือเรียกว่า InfoWindow ซึ่งทาง Google ได้มี Class ที่ชื่อว่า InfoWindow มาให้เราพร้อมใช้งานดูตาม Reference ของ Maps API V3 ตามลิงก์นี้ http://code.google.com/apis/maps/documentation/v3/reference.html#InfoWindow
InfoWindow จะแสดงบนแผนที่ได้ควรจะมี Options อย่างน้อยสามอย่าง คือ ข้อความ, ตำแหน่งบนแผนที่ และ แผนที่ที่จะให้แสดงข้อความออกมา ข้อความ และตำแหน่ง ในที่นี่ก็คือ Properties ใน InfoWindowOptions ที่ชื่อว่า content และ position โดย position มี Type เป็น LatLng ส่วนแผนที่หรือ map จะส่งค่าไปเืมื่อเราต้องการให้แสดงข้อความ โดยเรียกใช้ Method open แต่บทความก่อนหน้าเราได้กล่าวถึง Google Maps V3 : Arguments in UI Events ดังนั้นเรามาใช้ร่วมกันกับ InfoWindow โดยที่เราจะแสดงข้อความเป็นตำแหน่งที่ถูกคลิกขวาบนแผนที่ โดยใช้ rightclick ซึ่งเป็น Mouse event ของ map
google.maps.event.addListener(map, 'rightclick', function(e) {
var infowindow = new google.maps.InfoWindow(
{ content: e.latLng.toString(),
position:e.latLng
});
infowindow.open(map);
});
ถ้าเราอยากจะให้แสดงข้อความเมื่อมีการคลิกที่ Marker ก็สามารถทำได้ โดยส่ง Parameter ตำแหน่งที่ 2 เป็น Object marker เข้าไปใน Method open จากเดิมที่ใช้คำสั่ง alert ของ javascript แสดงข้อความเมื่อคลิกไปที่ Marker เราจะเปลี่ยนมาใช้เป็น InfoWindow
google.maps.event.addListener(marker, 'click', function() {
//alert(' Marker was clicked.');
var infowindow2 = new google.maps.InfoWindow(
{content: 'Marker was clicked.'}
);
infowindow2.open(map, marker);
});
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(13.742762, 100.535631);
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map
(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');
marker.draggable = true;
google.maps.event.addListener(marker, 'click', function() {
// alert(' Marker was clicked.');
var infowindow2 = new google.maps.InfoWindow(
{content: 'Marker was clicked.'}
);
infowindow2.open(map, marker);
});
google.maps.event.addListener(map, 'click', function(e) {
var new_marker = new google.maps.Marker({
position: e.latLng,
map: map,
title: e.latLng.toString()
});
});
google.maps.event.addListener(map, 'rightclick', function(e) {
var infowindow = new google.maps.InfoWindow(
{ content: e.latLng.toString(),
size: new google.maps.Size(50,50),
position:e.latLng
});
infowindow.open(map);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
