Programmer Experience

วันจันทร์ที่ 29 มีนาคม พ.ศ. 2553

Google Maps V3 : InfoWindow

หัวข้อนี้เราจะมากล่าวถึงการแสดงข้อความออกมาบนแผนที่ หรือเรียกว่า 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>

วันพุธที่ 24 มีนาคม พ.ศ. 2553

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>

วันอังคารที่ 23 มีนาคม พ.ศ. 2553

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>