Basic Google Map II

            หัวข้อนี้เขียนถึง Event Listeners สำหรับติดตามการโต้ตอบระหว่างผู้ใช้ โดยเป็นกลไกในการตอบสนอง event จากผู้ใช้ ซึ่ง API ได้กำหนดช่องทางการลงทะเบียน Event Listeners  ผ่าน GEvent.addListener() method

1. click event

           ทดลองกำหนด event ประเภท click() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อทำการ click บนแผนที่

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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&#8221;
            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);
      // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “click”, function() {
          alert(“Hello , คุณกำลังคลิ๊กแผนที่”);
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

        ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

14.jpg

2. moveend

      ทดลองกำหนด event ประเภท moveend() ให้กับ Gmap Object โดยจะทำการสร้างโค้ดประมวลผลโต้ตอบกับผู้ใช้เมื่อสิ้นสุดการ move แผนที่ด้วยการเลื่อนแผนที่(Pan)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; 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&#8221;
            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);
       // ลงทะเบียน click event พร้อมระบุการประมวลผล
        GEvent.addListener(map, “moveend”, function() {
          var center = map.getCenter();
          document.getElementById(“message”).innerHTML = “ค่าพิกัด “+center.toString();
         });
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  <div id=”message”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

15.jpg

 3. Passed Arguments in Events

               Gmap API ในส่วนของ event handle จะมี Arguments ที่อยู่ใน event ต่างๆ เช่น click ก็จะมีสอง Arguments ได้แก่ (overlay,point) โปรแกรมเมอร์สามารถเข้าถึงค่า Arguments ที่เกิดขึ้นพร้อมกับ event มาประมวลผลต่อได้ โดยในตัวอย่างจะทำการเรียกดูค่าพิกัดภาพ ณ ตำแหน่งที่ผู้ใช้ทำการ click mouse บนแผนที่ โดยเขียนโค้ดโปรแกรมได้ดังนี้

<!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&amp;v=2&amp;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);
       // ลงทะเบียน click event และค่า agruments พร้อมระบุการประมวลผล
        GEvent.addListener(map,”click”, function(overlay,latlng) {    
        var myHtml = “ค่าพิกัดภาพ = : ” + map.fromLatLngToDivPixel(latlng) + ” Zoom level =” + map.getZoom();
        map.openInfoWindow(latlng, myHtml);
      });
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  
      }
    } 
    </script>
  </head>
  <body onload=”initialize()” onunload=”GUnload()”>
    <div id=”map_canvas” style=”width: 500px; height: 300px”></div>
  </body>
</html>

ทำการเขียนโค้ด แล้วบันทึกเป็นไฟล์ html จากนั้นทำการ Run เพื่อดูผลลัพธ์

 อ้างอิงจาก

http://code.google.com/apis/maps/documentation/events.html

Advertisements

2 thoughts on “Basic Google Map II

Add yours

  1. ขอโทษนะคะ คือลองทำตามโค้ดที่คุณแนะนำ แต่มันรันไม่ขึ้นเลยอ่ะค่ะ ไม่ทราบว่าเป็นที่ key หรือป่าว แต่ลองกับแบบอื่นแล้ว รันได้อ่ะค่ะ ช่วยแนะนำด้วยนะคะ

    ลองเปลี่ยนส่วน key เป็น 2 แบบนี้ก็ยังรันไม่ได้อ่ะค่ะ

    คือดิฉันลองสมัคร API แล้วค่ะ ได้เป็นแบบนี้ค่ะ

    Your key is:

    ABQIAAAApwvhM-aTNK34wFcbijYvdRRi_j0U6kJrkFvY4-OX2XYmEAa76BRqm1JW_ZbZtHixYqykg8VkY6mH1A

    JavaScript Maps API Example
    Within the JavaScript Maps API, place the key within the script tag when you load the API:


    // Note: you will need to replace the sensor parameter below with either an explicit true or false value.

    ช่วยแนะนำด้วยนะค ขอบคุณมากค่ะ (มือใหม่พึ่งเริ่มศึกษาค่ะ)

  2. ขอโทษอีกครั้งนะคะ พิมพ์ไม่ครบ (รีบไปหน่อยค่ะ)

    ลองเปลี่ยนส่วน key เป็น 2 แบบนี้ก็ยังรันไม่ได้อ่ะค่ะ

    กับแบบ

    โค้ดนี้ลองรันได้กับแบบอื่นอ่ะค่ะ แต่ส่วนของคุณรันไม่ได้ค่ะ

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

สร้างเว็บไซต์หรือบล็อกฟรีที่ WordPress.com.

Up ↑

%d bloggers like this: