Google Maps V3 : Arguments in UI Events

ในห้วข้อนี้เรามาพูดถึงการรับค่า Arguments ของ Event จากบทความก่อนหน้า Google Maps V3 : Events ได้กล่าวถึงประเภทของ Event มี 2 ประเภท ซึ่งการรับค่า Arguments ของ Event นั้น จะมาจาก Event ประเภท User Events เช่น Event click ของ Class Map จะมี Mouse event ส่งออกเมื่อ Map มีการถูกคลิก โดยที่ Mouse event จะมี Property latLng ให้ใช้งาน ส่วน Event อีกประเภทที่เป็น MVC state changed มักจะไม่มี Arguments ส่งออกมา





เราจะปักหมุดหรือสร้าง Marker เมื่อมีการคลิกลงบน Map พร้อมใส่ title ให้ Marker ซักหน่อยจะได้รู้ตำแหน่งที่เราได้ปักหมุดลงไป

   google.maps.event.addListener(map, 'click', function(e) {  
      var marker2 = new google.maps.Marker({
         position: e.latLng, 
         map: map,
         title: e.latLng.toString()
      });
   });  

---

<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.');  
   });  
   
   google.maps.event.addListener(map, 'click', function(e) {  
      var marker2 = new google.maps.Marker({
         position: e.latLng, 
         map: map
      });
   });   
}

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

---

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>

---