ในหัวข้อนี้ผมขอเขียนถึงการใช้งาน control ที่อยู่ใน GControl class ของ Google Map โดยผมขอกล่าวถึง control ที่มีผมต่อการควบคุมการทำงานของ Map Type เท่านั้นเพราะเป็นสิ่งที่ใช้งานบ่อย แต่สำหรับท่านที่ต้องการปรับปรุงหรือจะสร้าง control ของท่านเองก็สามารถเข้าไปศึกษาเพิ่มเติมได้ที่ http://maps.google.com

      Google Maps API นั้นจะมีคลาสออปเจ็ค GControl ที่เป็นแม่แบบของ control ทั้งหมด แต่สำหรับ Map type จะประกอบด้วย G_NORMAL_MAP, G_SATELLITE_MAP,G_PHYSICAL_MAP  และ G_HYBRID_MAP โดย

      G_NORMAL_MAP : คือข้อมูลแผนที่ถนน แผนที่ทั่วไป

      G_SATELLITE_MAP คือข้อมูลแผนที่ภาพถ่ายดาวเทียม

      G_PHYSICAL_MAP  คือ ข้อมูลแผนที่สภาพภูมิประเทศ

      G_HYBRID_MAP คือแผนที่ผสมระหว่างแผนที่ถนนกับภาพถ่ายดาวเทียมรายละเอียดสูง

1. ทดลองเขียนโค้ดโปรแกรมควบคุมการแสดงผลของ map type ดังต่อไปนี้

 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”
http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”>
  <head>
    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
    <title>Gmap Simple Events</title>
 
<!– กำหนด API Key–>
    <script src=”
http://maps.google.com/maps?file=api&v=2&key=yourkey
            type=”text/javascript”></script>
    <script type=”text/javascript”>
    function initialize() {
   // ตรวจสอบความสามารถของ Browser
      if (GBrowserIsCompatible()) {
      // สร้าง Gmap Object
        var map = new GMap2(document.getElementById(“map_canvas”));
        // กำหนดค่าพิกัดจุดกลางแผนที่สำหรับเริ่มต้น
        map.setCenter(new GLatLng(13.75, 100.65), 13);
       // สร้าง Gmap Type Control
      var mapTypeControl = new GMapTypeControl();
       // กำหนดตำแหน่งและขนาด : บนขวา
        var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10));
      // กำหนดตำแหน่งและขนาด : ล่างขวา
        var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
      // เพิ่ม Control Object ลงใน Map
        map.addControl(mapTypeControl, topRight);
      // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “dblclick”, function() {
      // กำจัด Map Type Control
          map.removeControl(mapTypeControl);
      // เพิ่ม Map Type Control ใหม่
          map.addControl(new GMapTypeControl(), bottomRight);
         });
     // เพิ่ม Map Tool Control ลงไป
     map.addControl(new GSmallMapControl());

      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

  ทำการ upload ไฟล์ขึ้น Server ทดลอง Run โค้ดเพื่อดูผลลัพธ์

ภาพผลลัพธ์ที่ได้ เมื่อทำการ DBClick บนแผนที่ Map Type Control จะย้ายตำแหน่งลงมาด้านล่าง

 

  กรณีที่ต้องการใช้ Terrian Map ให้ทำการเพิ่ม G_PHYSICAL_MAP ลงไปด้วยโค้ดต่อไปนี้

            map.addMapType(G_PHYSICAL_MAP);