Programmer Experience: 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>

Programmer Experience

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

Google Maps V3 : Controls

ไม่มีความคิดเห็น:

QUALIFIED DEVELOPER