Category — Google Maps

ไม่ได้เขียนถึง Google Maps API นานมาก เผลอแป๊บเดียว ตอนนี้ Google ได้ออกเวอร์ชั่นใหม่แล้วเป็น Google Maps API V3 แล้วครับ โดยที่ใช้งานดีขึ้น เร็วขึ้น และมี function ต่างๆมากขึ้นเยอะเลยครับ

หลังจากโพสเรื่อง การหาเส้นทางโดย Google Maps API ไป มีคำถามเข้ามาเยอะแยะมากครับ แสดงว่าเริ่มมีคนสนใจเขียน Google Maps API กันเยอะขึ้นมาก น่าดีใจครับ วันนี้เลยจะมาเล่าเรื่อง function ใหม่ล่าสุดของการหาเส้นทางโดย Google Maps API ก็คือ Draggable Direction ครับ

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

document จาก Google ครับ http://code.google.com/apis/maps/documentation/javascript/services.html#DraggableDirections

ก่อนอื่นลองดูตัวอย่างว่าเรากำลังจะทำอะไรกันครับ Draggable Direction Example (ลองใช้ mouse จับเส้นทางลาก เพื่อเปลี่ยนเส้นทางครับ)

ทีนี้ลองมาดูกันครับว่ามันทำงานยังไง

        function initialize() {
            var center = new google.maps.LatLng(13.732881766645967,100.48181533813477);
            var myOptions = {
                zoom: 12,
                center: center,
                scrollwheel: false,
                mapTypeControl: false,
                navigationControl: true,
                disableDefaultUI: true,
                streetViewControl: false,
                noClear: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), myOptions);

            var rendererOptions = {
                draggable: true
            };
            var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("route"));

            var directionsService = new google.maps.DirectionsService();

            var request = {
                origin: "14.068, 100.6009",
                destination: "13.8152, 100.5606",
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

ส่วนต้นๆของ function initialize จนถึงบรรทัด 14 เป็นการสร้างแผนที่ธรรมดา ตามวิธีของ Google Maps API V3 ครับ มาเริ่มน่าสนใจตั้งแต่บรรทัดที่ 16 ลงมา

ก่อนอื่นมาทำความเข้าใจกันก่อนครับ ว่าใน Google Maps API V3 เนี้ย การหาเส้นทางจะใช้ API หลักๆอยู่ 2 ตัวคือ

1. google.maps.DirectionsService เอาไว้ request ให้ Google หาเส้นทางให้ โดยเราจะส่งค่า จุดเริ่มต้น จุดสิ้นสุด และวิธีการเดินทางว่าจะเอาเส้นทางแบบขับรถ หรือเดินเท้า ไปให้ Google และ Google ก็จะส่งผลลัพธ์กลับมาให้ครับ
2. google.maps.DirectionsRenderer เอาไว้แสดงผลลัพธ์ที่ Google ส่งกลับมาให้เราครับ

โดยในบรรทัดที่ 16-22 เป็นการ define DirectionsRenderer เพื่อเอาไว้แสดงผลครับ

โดยเรากำหนดให้เส้นทางที่จะแสดงสามารถจัดเลื่อนได้ โดยการกำหนด parameter draggable : true ในตอนสร้าง DirectionsRenderer

จากนั้นในบรรทัดที่ 21 เรากำหนดให้ ตัวแสดงผลของที่ แสดงเส้นทางในแผนที่ (ตัวแปล map) ที่เราสร้างแผนที่ไว้ก่อนหน้าแล้ว

บรรทัดที่  22 เป็นการกำหนดให้แสดงคำอธิบายเส้นทาง ประมาณว่า “ตรงไป 1 กม. แล้วเลี่้ยวขวา” ใน markup ที่ที id = “route” ซึ่งเรากำหนด DIV ที่มี id = “route” เอาไว้แล้ว

แค่นี้ตัวแสดงผลของเราก็เรียบร้อย เหลือแค่การ request เส้นทางเท่านั้นเองครับ

ในบรรทัดที่ 24 เราก็สร้าง directionsService ขึ้นมาเพื่อเอาไว้ขอเส้นทาง

และเราขอเส้นทางกับ Google โดยใช้ method directionsService.route ครับ โดยรูปแบบการเรียกใช้งานคือ
directionsService.route(request:DirectionsRequest, callback:function(DirectionsResult,DirectionsStatus)))

parameter ตัวแรก DirectionRequest ก็คือพวกระบุจุดเริ่มต้น จุดหมายปลายทาง วิธีการเดินทาง จะให้หลบทางด่วนไหม อะไรประมาณนี้ครับ ใครอยากดูทั้งหมดลองดูที่ (DirectionsRequest)

parameter ตัวที่สอง คือ callback function ที่จะทำงานหลังได้ผลลัพธ์จาก Google ครับ

ในตัวอย่างเราระบุจุดเริ่มต้น จุดหมายปลายทาง และวิธีการเดินทางดังนี้ครับ

var request = {
    origin: "14.068, 100.6009",
    destination: "13.8152, 100.5606",
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};

และบรรทัดที่ 31 ก็ส่ง object request เป็น parameter แรกของ method route และกำหนดให้ callback function แสดงผลลัพธ์ด้วย method directionsDisplay.setDirections(response); ในบรรทัดที่ 33 ครับ

แต่ถ้า Google ไม่สามารถหาเส้นทางได้ status จะไม่เท่ากับ google.maps.DirectionsStatus.OK เราก็จะไม่แสดงผลลัพธ์ครับ

แค่นี้ก็เป็นอันเสร็จครับ เส้นทางที่เราสร้างขึ้นก็จะสามารถจับเลื่อนได้ และหลังจากเปลี่ยนเส้นทางแล้ว Google จะแสดงเส้นทางใหม่พร้อม update คำอธิบายการเดินทางให้เองเลยครับ เห็นไหมครับ ว่า Google Maps API V3 เนี้ยเจ๋งจริงๆ

ถ้ามีคำถามตรงไหน เชิญใน Comment ได้เลยครับ

เมื่อสองสามวันก่อน มี comment ถามมาว่า “อยากทราบว่าสามารถทำ google map บอกระยะทางได้ไหมค่ะ เช่น จากกรุงเทพไปเชียงใหม่เป็นระยะทางเท่าไหร่” ผมก็ตอบไปสั้นๆ วันนี้ขอขยายความเรื่องการหาเส้นทาง และการหาระยะทางจากจุดสองจุดในโดยใช้ Google Maps API ครับ เรื่องนี้เป็นเรื่องที่หลายๆคนสนใจ และเวปใหม่ที่ผมกำลังซุ่มทำอยู่ก็ใช้เยอะมากครับ

ใครอ่านภาษาอังกฤษคล่อง และต้องการข้อมูลแบบละเอียด ผมแนะน ลองอ่าน document ของ Google นะครับ http://code.google.com/apis/maps/documentation/services.html#Directions

เรามาเริ่มกันเลยดีกว่าครับ อ้อ! วิธีการข้างล่างจะเ็ป็นของ API v2 นะครับ เพราะว่าคนส่วนใหญ่คงยังใช้งาน version 2 กันอยู่

<!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>
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAeNsNnRXUdrpgSw3qfvhz5hRHchrjOSPM-moa2HMmJZw-0fE6VhTsARfVd9x1Dg8TowZALqHIOcO20g"
      type="text/javascript"></script>
    <script type="text/javascript">
	// Create a directions object and register a map and DIV to hold the
    // resulting computed directions

    var map;
    var directionsPanel;
    var directions;

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(13.998, 100.5009), 15);
      directions = new GDirections(map);
      directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606"});
   }
  </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="width: 70%; height: 480px; float:left; border: 1px solid black;"></div>
    <br/>
  </body>
</html>

source code ข้างบนผมเอามาจาก Tutorial ของ Google ครับ การใช้ GDirection ง่ายมากครับ โดย code ส่วนที่เกี่ยวข้องจริงๆคือบรรทัดที่ 19-20

directions = new GDirections(map);
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606");


บรรทัดที่ 19 เป็นการสร้าง GDirections และระบุว่าให้แสดงเส้นทางใบแผนที่ที่เราสร้างไว้ก่อนหน้านี้
บรรทัดที่ 20 เป็นการเรียกใช้บริการหาเส้นทางจาก Google โดยเราระบุ จุดเริ่มต้นกับปลายทาง

การระบุจุดเริ่มต้นกับปลายทาง สามารถระบุเป็ืนชื่อสถานที่ก็ได้นะครับ แต่ผมว่ามันไม่ค่อยแม่นเนื่องจาก Google ต้องตีความสถานที่ก่อน และระบบ reverse-geocode สำหรับของไทยยังไม่สมบูรณ์ครับ

แค่นี้เราก็จะได้เส้นทางเ็ป็น Polyline บนแผนที่ของเราแล้วครับ

ถ้าต้องการให้ มีข้อความบอกเส้นทางด้วย แบบว่า “ตรงไป 2 กม. แล้วเลี้ยวซ้าย” ก็ทำได้ง่ายๆครับ โดยสร้าง div สำหรับแสดงผลขึ้นมาแล้วระบุตอน new GDirections แบบนี้ครับ


directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel );
directions.load("from: 14.068, 100.6009 to: 13.8152, 100.5606", {locale: 'th'});


ตรง {locale: ‘th’} เป็นการบอกว่าให้แสดงข้อความเป็นภาษาไทยครับ

ดูตัวอย่างการใช้หาเส้นทางจาก Google Maps API http://tanomsak.com/tutorial-7.html

Update: ตัวอย่างสำหรับกรณีมีจุดหมายสองจัดครับ http://tanomsak.com/tutorial-7_1.html

Update 2: วิธีการหาเส้นทางแบบเปลี่ยนแปลงเส้นทางได้ โดยใช้ Google Maps API V3

ถ้าผมอธิบายตรงไหนไม่เข้าใจ แนะนำได้ใน Comment เหมือนเดิมนะครับ

เมื่อเช้าตื่นขึ้นมาเจอ tweet ของ sebprovencher เรื่อง Google Maps เปลี่ยนหน้าตา (จริงผมว่าเพิ่มข้ิิอมูลถนนมากกว่า) กับ เรื่องที่มีการคาดการว่า Google จะให้บริการ Navigator ซึ่งผมคิดว่ามีแนวโน้มมาก และคิดว่า Google น่าจะทำได้ดีด้วยเพราะที่ผ่านมาผมใช้บริการ Direction ของ Google ตลอดและทำได้ดีมาก ถ้ารวมกับข้อมูลถนนที่เพิ่มใหม่คงจะออกมาเป็นบริการที่ดีมากๆ

[Read more →]

ถ้าใครเคยเข้าไปเวป ddproperty.com จะเห็นว่าปุ่มซูมเข้าซูมออกจะไม่เหมือนแบบปกติของ Google Maps และมีปุ่มย่อขยายแผนที่เพิ่มขึ้นมาด้วย การทำแบบนี้เค้าเรียกว่า Custom Control ครับ

คราวนี้เราจะพูดถึงเรื่องการสร้าง Control ของ Google Maps ให้เป็นแบบเฉพาะของเวปเรากันครับ

[Read more →]

คิดว่าหลายๆคนคงจะรู้จัก Google Static Maps API กันบ้างนะครับ ตัว Static map จะเป็นรูปแผนที่ Google Maps แบบที่เป็นรูปภาพนิ่ง คือไม่สามารถลากเพื่อเปลี่ยนที่ และไม่สามารถว่าซูมเข้าออกได้ ประโยชน์ของมันก็คือโหลดเร็วเพราะว่าเป็นรูปภาพรูปเดียว เหมาะสำหรับการแสดงตำแหน่งแค่คร่าวๆ เพราะบางครั้งแผนที่ไม่ใช้ส่วนสำคัญในหน้าเวป จะได้ไม่ต้องเสียเวลาโหลดตัว API นานๆครับ

Google Static Maps มีการสนับสนุนการแสดงหมุดด้วยครับ แต่ว่าหมุดมันจะเป็นชุดมาตราฐานซึ่งอาจจะไม่เข้ากับเวปอันแสนสวย(??) ของเราเท่าไหร่ จะใช้วิธีการเปลี่ยนรูปหมุดใน Google Maps ที่แนะนำไปแล้วก็ไม่ได้ เนื่องจากแผนที่เป็นรูปภาพไม่ได้สร้างจาก Javascript API

และนี่เป็นหัวข้อของผมในวันนี้ครับ คือการ การทำ Custom marker icon สำหรับ Google Static Maps ผมพบวิธีนี้จากเวป Yelp.com ตอนที่เค้าเปลี่ยนมาใช้ static map ครับ [Read more →]

หลังจากหายหน้าไปนาน ขอต่อเรื่อง Google Maps ด้วยการใช้รูปภาพแทนหมุดกันครับ ถ้าจะค้นหาบทความเพิ่มเติม ลองค้นคำว่า Custom Marker Icon นะครับ เรามาเริ่มเรื่องของเรากันเลยดีกว่า

สังเกตุไหมครับว่าจากตัวอย่างที่ผ่านๆมาทั้งหมด หมุดของเราเป็นหมุดแดงๆ แล้วมีจุดดำๆตรงกลาง ซึ่งเป็นมาตรฐานของ Google Maps เค้า บา่งทีมันอาจดูไม่เนียน ไม่เข้ากับเวปเราเท่าไหร่ สามารถเปลี่ยนได้นะครับ โดยใช้ Customer Marker Icon วิธีกา่รไม่ยากครับ ผมว่าที่ยากที่สุดก็ตรงทำรูป Icon ที่ดูดีอย่างที่ต้องการมากกว่า (ของ ddproperty.com ผมกับเพื่อน ก็ดูแบบจากหลายๆที่มารวมๆกัน ซึ่งทำนานกว่าเขียน script อีก)

[Read more →]

ในเวป ddproperty.com ที่ผมกับเพื่อนดูแลอยู่เนี้ย เราให้คนที่ลงประกาศทุกคนต้องระบุตำแหน่งด้วยว่า อสังหาฯที่กำลังลงประกาศตำแหน่งอยู่ตรงไหน ผมก็ใ้ช้ google maps นี้แหละครับในการระบุตำแหน่ง

คราวนี้เราจะมาดูกันว่า จะใช้ Google Maps เพิ่มตำแหน่งหมุดใน Database ยังไง [Read more →]

ความเดิมจากตอนที่แล้ว เราพูดถึงวิธีิการแสดงหมุดจาก database บนแผนที่ Google Maps ไปแล้ว แต่ติดตรงที่ว่าเวลามีหมุดเยอะๆจะแสดงหน้าเวปช้า และเปลือง memory คราวนี้ผมจะพูดถึงการใช้วิธีการแสดงหมุดจาก database เฉพาะส่วนที่มองเห็นในหน้าต่างแผนที่โดยการใช้ AJAX ครับ

ส่วน table database และ ข้อมูลใน database ก็ใช้ของคราวที่แล้วครับ (ดูได้ที่ Tutorial แบบบ้านๆ ตอนที่ 2 – แสดงหมุดจาก database ใน Google Maps)

สิ่งที่ต้องเตรียมก่อนเริ่ม

1. ผมใช้ Prototype Javascript Framework สำหรับทำ AJAX เพราะมันติดมากับ Rails เลยชินครับ ถ้าใครถนัดตัวอื่นก็ตามสะดวก
2. แนะนำ Firefox + Firebug สำหรับการ Debug ครับ สุดยอดมากๆ

หลักกาำรทำงาน

1. ทุกครั้งที่มีกา่รเลื่อนแผนที่ หรือซูมเข้า/ซูมออก script จะขอข้อมูลจาก server และนำไปแสดงจุดพิกัดใหม่ในแผนที่
2. ใช้พิกัดของแผนที่ ที่กำลังแสดงผล (x1,y1,x2,y2 ตรงมุมกรอบของแผนที่) เป็นตัวแปลในการเลือกข้อมูลพิกัดจาก database [Read more →]

จากคราวก่อนที่เราทดลองใช้ Google Maps API แสดงแผนที่ในหน้าเวปของเราไปแล้ว (อ่าน Tutorial แบบบ้านๆ ตอนที่ 1) คราวนี้มาต่อตอนที่ 2: เพิ่มและแสดงหมุดใน Google Maps กันครับ

ประโยชน์ของการใช้ Google Maps API แสดงแผนที่ก็คือเราสามารถแสดงหมุด จากข้อมูลใน database ของเราเองได้ คราวนี้เราจะทดลองสร้าง interface ให้ปักหมุด จัดค่าพิกัดใน database และนำข้อมูลจาก database กลับมาแสดงครับ

สิ่งที่ต้องเตรียมก่อนเริ่ม

1. Database server สำหรับเก็บข้อมูลพิกัด (ผมใช้ MySQL v5.0)
2. Web Server สำหรับประมวลผลและติดต่อ database จะใช้อะไรก็ตามสะดวกครับ (ผมเขียน server side ด้วย Rails ครับ ขอใช้ตัวอย่างเป็น Rails นะครับ)

ขั้นตอนที่ 1 มารู้จักวิธีการแสดงหมุดบนแผนที่ด้วย Google Maps API กันก่อน

หมุดที่แสดงบนแผนที่ Google Maps จะเรียกว่า Marker ครับ โดยการจะแสดงหมุดบนแผนที่นั้น ก็ต้องสร้าง Marker ขึ้นมาก่อน แล้วก็ทำการเพิ่ม Marker ที่สร้างมาลงบนแผนที่ ลองดูจาก script นะครับ

[Read more →]

ตอนผมทำเวป ddproperty.com อยากจะเอา Google Maps มาใช้ระบุตำแหน่ง ก็เลยหาข้อมูลจากหลายๆที่ ทั้งดูตัวอย่างจากเวป แล้วก็หาอ่านจาก เอกสารของ google และ Google Maps Tutorial รวมถึงเอกสาร การใช้ Google Maps API ที่ รองศาสตราจารย์สวัสดิ์ชัย เกรียงไกรเพชร รวบรวมไว้ซึ่งละเอียดมากๆ ถ้าใครต้องการเนื้อหาแบบละเอียดๆ ก็ลองอ่านดูได้จาก link ข้างต้นไม่ผิดหวังครับ

แต่ที่ผมจะเขียนนี้ขอเป็น Google Maps Tutorial แบบบ้านๆ รวบรวมเฉพาะส่วนที่ผมใช้เป็นหลักในเวป ddproperty.com โดยจะแบ่งเป็นตอนๆแบบนี้ครับ

1. Basic Google Maps API
2. แสดงหมุดจาก database ใน Google Maps
3. แสดงหมุดจาก database ใน Google Maps ด้วย AJAX
4. เพิ่มหมุดใน database
5. ใช้รูปภาพแทนหมุด (Custom Marker Icon)
6. การทำ Custom marker icon สำหรับ Google Static Maps
7. ใช้รูปภาพแทนปุม control (Custom Control)
8. สร้าง info windows แบบลอยนอกแผนที่
9. แล้วแต่จะคิดออกต่อๆำไปครับ

[Read more →]