วางแผนการเดินทางด้วย Google Maps

หลังจากที่ทำ google map กันไปครั้งที่แล้ว (มาใช้ Google Maps กับ iOS App กันเถอะนะ) ครั้งนี้เราจะมากำหนดจุดเริ่มต้นและปลายทาง เพื่อให้ google map หาเส้นทางการเดินทางให้ โดยสามารถเลือกได้ว่าจะเดินทางด้วยการเดิน รถส่วนตัว หรือรถประจำทาง

เริ่มกันที่ไฟล์ pod สิ่งที่ต้องเพิ่มเพื่อการวาดเส้นทางคือ

จากนั้นไปที่ console.developers.google.com แล้ว enable API Google Maps Directions API
เพิ่มอีก 1 ตัว(เป็น3) สำหรับคำนวณเส้นทางผ่าน HTTP โดยสามารถเลือกการเดินทาง
ได้ 4  แบบคือ เดิน จักรยาน รถส่วนตัวและรถประจำทาง

จากนั้นไปที่ main.storyboard เนื่องจากเราจะใช้การ autocomplete ของ google map จึงต้องมีการเปิดหน้าใหม่ขึ้นมาเพื่อค้นหาสถานที่ เมื่อมีการเปิดหน้าใหม่-กลับหน้าเก่า ก็ต้องใช้ navigation controller สร้าง navigation controller ขึ้นมา วาง text field และ button บน text field ปุ่ม 3 ปุ่มสำหรับเลือกโหมดการเดินทาง ตกแต่ง-วางlayoutให้เรียบร้อย ก็จะได้หน้าตาประมาณนี้(ไม่ได้ตกแต่ง)

ระวังลำดับการวางด้วย อย่าให้มันบังกัน

แล้วก็ไปเขียนโค้ดกัน จากที่เรา pod ไฟล์เพิ่มมา 2 อันก็ import มันเข้ามาที่ viewController เลยแล้ว ประกาศ action ให้ปุ่มและ outlet ให้ textfield รอไว้เลย

ที่ class ViewController: เพิ่ม GMSAutocompleteViewControllerDelegate ไป ถ้าเกิด error ไม่ต้องตกใจ GMSAutocompleteViewController ต้องการฟังก์ชั่นมารองรับ 3 ฟังก์ชั่น คือ

didAutocompleteWith จะทำงานเมื่อเราเลือกสถานที่ที่ google autocomplete ให้

wasCancelled  จะทำงานเมื่อเรากดยกเลิกที่หน้าค้นหา

สำหรับใน didAutocompleteWith การทำงานจะเป็นดังนี้

-ถ้าเราเลือกช่องจุดเริ่มต้น(From)จะให้ startLocation เก็บค่าสถานที่ที่เราค้นหา

-ถ้าเราเลือกช่องปลายทาง(To)จะให้ endLocation เก็บค่าสถานที่ที่เราค้นหา

-camera ใช้สำหรับเลื่อน view ของเราไปที่จุดเราเลือก(ไม่ใช้ก็ได้)

-.clear() ใช้สำหรับลบจุดหมายและเส้นทางเก่าที่เราเลือกไว้

-ถ้าตำแหน่งเริ่มและปลายทางไม่ใช่ค่าว่างเปล่า ให้เรียกใช้ฟังก์ชั่น drawRoute(จะอธิบายหลังจากนี้)

-ให้ช่องค้นหาที่เราเลือกมีข้อความเป็นสถานที่ที่เราเลือก

***ตัวแปรที่เรายังไม่มีคือ selectedLocation, startLocation, endLocation, selectedTF

จากตัวแปรที่ยังขาดอยู่ ให้เราประกาศเพิ่ม 4 ตัว(locationManager มีอยู่แล้ว) เป็น

จากนั้นเราจะขาดฟังก์ชั่น drawRoute หรือฟังก์ชั่นที่วาดเส้นทางนั่นเอง ก็สร้างฟังก์ชั่นขึ้นมา โดยจะรับค่าเข้า 2 ตัว คือจุดเริ่มต้นและปลายทาง

จากนั้นให้เปลี่ยนค่าตำแหน่งที่รับมาให้เป็น string เพื่อนำไปใช้กับ HTTP

สำหรับ url ตรง json?origin= คือค่า latitude,longtitude ของจุดเริ่มต้นในรูป string

destination= คือค่า latitude,longtitude ของจุดปลายทางในรูป string

mode= คือรูปแบบการเดินทาง(walking, cycling, driving, transit)

***ตัวแปรที่เรายังไม่มีคือ selectedMode ให้ประกาศเพิ่ม var selectedMode = "เลือก 1 โหมด" เป็น

ฟังก์ชั่น drawRoute ยังไม่จบ หลังจากวางจุดเริ่มและปลายทางแล้ว ต่อเป็นก็จะให้วาดเส้นบน view ของเรา(พิมพ์เยอะหน่อยนะ)

สิ่งที่เปลี่ยนได้ก็คือ รูปแบบเส้น GMSPolyline, ความหน้าของเส้น strokeWidth, สีของเส้น strokeColor

แล้วเราก็จะมาโค้ดให้ปุ่มค้นหากัน จากที่ประกาศ action ไว้ตอนแรก(From, To)การทำงานจะคล้ายกัน(มากๆ)

ปุ่ม startLocAction คือจุดเริ่มต้น เมื่อกดแล้วจะเปิดหน้าใหม่ขึ้นมา เป็นหน้าค้นหาสถานที่ของ google ก็ประกาศตัวแปรขึ้นมาให้เป็น GMSAutocompleteViewController() 

อย่าลืมให้ autoComplete.delegate = self จากนั้นให้แอพจำค่าว่าเราเลือกช่องจุดเริ่มต้นหรือปลายทาง เนื่องจาก xcode มี didAutocomplete แค่ฟังชั่นเดียว มันแยกไม่ออกว่าเราจะเลือกจุดไหน เลยต้องกำหนดให้มัน ส่วนปุ่มปลายทาง endLocAction โค้ดเหมือนกันเลยแค่เปลี่ยน selectedTF, selectedLocation เป็นตัวปลายทางก็เรียบร้อย
ถึงตอนนี้ถ้าลองรันดู น่าจะได้เส้นแล้วแต่ไม่มีหมุดปักที่ต้นทางและปลายทาง และยังไม่สามารถเลือกโหมดการเดินทางได้
*เกือบลืมไป เราไม่ได้กำหนดค่าเริ่มต้นให้กับ startLocation และ endLocation จะทำให้เกิด error ได้
ต้องไปกำหนดค่าเริ่มต้นในฟังก์ชั่น didUpdateLocations  ด้วย

การเลือกโหมดนั้นง่ายมาก จาก action ของปุ่มที่เราประกาศไว้แล้ว ให้ตัวแปร 

selectedMode = "โหมดที่เลือก" แล้ว clear() เพื่อลบเส้นเก่าออกจาก view และเรียกใช้ drawRoute เพื่อสร้างเส้นใหม่ตามโหมดการเดินทางที่เราเลือก อยากได้กี่โหมดก็เพิ่มเอาเลย(action ละ 1 โหมด)

ส่วนหมุด น่าจะเคยทำกันไปแล้วในครั้งที่แล้ว เพียงแค่คราวนี้เราสร้างให้เป็นฟังก์ชั่นเพื่อความสะดวกในการใช้

เมื่อได้ฟังก์ชั่นแล้ว ก็เรียกใช้กันตามต้องการได้เลย ในนี้ใส่ไว้ในฟังก์ชั่น drawRoute(ล่างสุด)

เท่านี้ก็เสร็จเรียบร้อยครับ