Google Maps V3 : Events

เมื่อเราพูดถึง Events คือการดักจักเหตุการณ์ต่างๆ ของ Object นั้นๆ โดยที่ Object นั้นจะส่งสัญญาณออกมาว่าโดนกระทำอะไรก็ส่งออกมา เราก็มาดักจับสัญญาณนั้นๆ ว่าจะให้ทำอะไร เช่นในหัวข้อนี้เราจะมาดักจับ Events ของ Marker โดย Events ของ Marker เมื่อเราดูที่ API
Reference ของ Maps API V3 มีตามนี้


events ถูกแบ่งแยกออกเป็น 2 ประเภท คือ

• User events ส่วนใหญ่เป็น events ที่มาจากผู้ใช้งานผ่านทางการคลิกเมาส์หรือกดคีย์บอร์ด เช่น 'click', 'mousedown' เป็นต้น
• MVC state change เป็น events ที่มาจากการบอกสถานะต่างๆ ของ Object ที่ถูกเปลี่ยนไป เช่น 'zoom_changed' จาก Class ของ Map, 'position_changed' จาก Class ของ Marker ส่วนใหญ่มีข้อตกลงตั้งชื่อเป็น property_changed

การใช้งาน event handlers หรือดับจับเหตุการณ์ ใน Maps API เราจะใช้คำสั่ง addListener() ใน namespace ที่ชือว่า google.maps.event ซึ่งเป็นคำสั่งเกี่ยวกับ event listeners ใน JavaScript

เราจะดับจับ event เมื่อ Marker ถูกคลิก ให้แสดง Message ออกมา

google.maps.event.addListener(marker, 'click', function() {
 alert(' Marker was clicked.');
});

---

<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.');
});
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

---

Google Maps V3 : Marker

จากบทความก่อนหน้า Google Maps V3 : Hello, World ได้พูดถึงการไปเรียก Maps API ของ Google เพื่อนำ Maps มาแสดงบนหน้า web ของเรา บทความนี้เราจะนำหมุดหรือเรียกว่า Marker มาแสดงบนแผนที่

Marker จะแสดงบนแผนที่ได้ควรจะมี Options อย่างน้อยสองอย่าง คือ ตำแหน่ง และ แผนที่ที่จะให้ปักหมุดลงไป ตำแหน่งและแผนที่ ในที่นี่ก็คือ Properties ใน MarkerOptions ที่ชื่อว่า map และ position โดย position มี Type เป็น LatLng

 var marker = new google.maps.Marker({
  position: latlng,
  map: map
 });

แค่นี้ก็สามารถนำ Marker มาอยู่บน Maps เราได้แล้ว ถ้าอยากจะเปลี่ยน Icon ก็เรียก Method setIcon แล้วส่ง Parameter เป็น Path ของรูป Icon ที่อยากเปลี่ยน ส่วน Icon หาได้ที่ http://code.google.com/p/google-maps-icons/

 marker.setIcon('http://google-maps-icons.googlecode.com/files/restaurant.png');

อยากใช้ mouse คลิกเพื่อเคลื่อนย้าย Marker ไปไหนมาไหนบน Maps ก็เซ็ตค่า Property draggable เป็น true

 marker.draggable = true;

---

<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;
}

</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

---

Mashup : Web Application Hybrid

เห็นช่วงนี้ Hybrid กำลังพูดถึงกัน เรามาดูว่าถ้าเป็น Web Application Hybrid จะสื่อความหมายว่าอะไร จริงแล้ว Web Application Hybrid หรือ Mashup หมายถึง การรวบรวมข้อมูลจากการเรียกใ้ช้บริการจากหลายๆที่ เพื่อนำมาสร้างบริการใหม่ๆ

พูดถึงความหมายอย่างเีดียวคงไม่เห็นภาพ เรามาดูตัวอย่างการ Mashup ข้อมูลจาก Twitter รวมกับ Google Maps ซึ่งจะแสดงคำพูดที่ tweets ออกมาจากตำแหน่งไหนแสดงลงบน Google Maps ซึ่งลองใช้บริการได้ที่

http://twitnearby.com


ศึกษาความหมายเพิ่มเติมได้ที่ Wikipedia