Programmer Experience

วันพฤหัสบดีที่ 8 เมษายน พ.ศ. 2553

Google Maps V3 : Controls

Google Maps เมื่อแสดงออกมาจะมีตัวควบคุมแผนที่ ซึ่งถูกแบ่งได้ตามนี้

Navigation control ใช้สำหรับ แพนและซูมแผนที่ โดยเริ่มต้นอยู่ในตำแหน่งข้างบนสุดทางซ้ายมือ
Scale control บอกถึงมาตราส่วนของแผนที่ ค่าเริ่มต้นถูกตั้งค่าไว้ไม่ให้แสดงผลออกมา
MapType control บ่งบอกถึงลักษณะของแผนที่ ไม่ว่าจะเป็น แผนที่แบบภาพถ่ายดาวเทียม(SATELLITE), แผนที่แบบแสดงเส้นทางการเดินทาง(ROADMAP) โดยเริ่มต้นอยู่ในตำแหน่งมุมขวามือข้างบนสุด

คำสั่งแรกที่จะนำเสนอเกี่ยวกับ Controls คือ คำสั่งที่ไม่ให้เห็น Controls ใดๆเลยบนแผนที่ของ Google Maps เราจะใช้คำสั่ง disableDefaultUI โดยให้มีค่าเป็น true ในตอนสร้าง MapOptions เพื่อใช้ส่งค่าเข้าไปตอนสร้าง Maps


var myOptions = {
  zoom: 12,
  center: latlng,
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP    
}

ส่วนการที่จะเพิ่ม Controls ที่ได้กล่าวถึงข้างบนลงไปบน Google Maps เราใช้ชื่อ property ตามนี้


{
navigationControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean
}

ถ้าจะเปลียนรูปแบบหรือสไตล์การแสดงของในแต่ละ Controls มีตัวเลือกให้เปลี่ยนได้ตามนี้
Navigation control มีสไตล์การแสดงที่เปลี่ยนได้คือ

google.maps.NavigationControlStyle.SMALL
google.maps.NavigationControlStyle.ZOOM_PAN
google.maps.NavigationControlStyle.ANDROID
google.maps.NavigationControlStyle.DEFAULT จะเปลี่ยนไปตามขนาดของ Maps และอุปกรณ์ที่ใช้รัน Maps

MapType control มีสไตล์การแสดงที่เปลี่ยนได้คือ

google.maps.MapTypeControlStyle.HORIZONTAL_BAR
google.maps.MapTypeControlStyle.DROPDOWN_MENU
google.maps.MapTypeControlStyle.DEFAULT จะเปลี่ยนไปตามขนาดของจอภาพที่แสดง Maps

Scale control มีสไตล์การแสดงแค่ค่าเดียวคือ

google.maps.ScaleControlStyle.DEFAULT

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

เราจะลองเปลี่ยนตำแหน่งและสไตล์การแสดงผลของ Controls ทั้งสามตามค่าที่ได้กล่าวถึง


  var myOptions = { 
    zoom: 12, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.TOP
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT  
    }
  }


<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,
     mapTypeControl: true,
     mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
         position: google.maps.ControlPosition.TOP
     },
     navigationControl: true,
     navigationControlOptions: {
         style: google.maps.NavigationControlStyle.ZOOM_PAN,
         position: google.maps.ControlPosition.TOP_RIGHT
     },
     scaleControl: true,
     scaleControlOptions: {
         position: google.maps.ControlPosition.BOTTOM_LEFT   
     }
   }    
   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 newnew_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>

วันจันทร์ที่ 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>