ไปเยี่ยมชมสถานที่รอบโลกกับ Google Maps Street View กันค่ะ

จะดีแค่ไหนค่ะ ถ้าคุณไปเยี่ยมชมสถานที่ต่างๆรอบโลกโดยไม่ต้องเสียค่าตั๋วเครื่องบิน ฮ่าๆ 😂
โดยการไปเยี่ยมชมสถานที่ต่างๆรอบโลกของเรานั้น จะไปด้วย Street View ของ Google Maps กันค่ะ

ตัวอย่างการทำงานของ application

เริ่มจากสร้างโปรเจ็คใหม่ขึ้นมาก่อนนะคะ จากนั้นเปิดเว็บไซต์ https://developers.google.com ซึ่งเราสามารถเลือกได้ว่า เราจะสร้าง product สำหรับอะไร ตามโจทย์ของเราคือ Maps กดเลือก Maps

เมื่อเข้าเว็บ Google Developers และเลือก Maps แล้วนะคะ 

จากนั้นก็ทำตามลำดับการทำงานตามบทความ อยากใช้ Google Maps กับ iOS App กันเถอะนะ จนถึง Step 6 ซึ่งใน Step 6 → เราไปที่ไฟล์ ViewController ที่เราต้องการให้แสดง Maps ค่ะ ซึ่งเราจะต้อง import GoogleMaps ก่อนเป็นอันดับแรกนะคะ 

และให้เราใส่ส่วนของ Class ด้วย GMSAutocompleteViewControllerDelegate กับ GMSMapViewDelegate จากนั้นสร้าง function ขึ้นมาหนึ่ง function เราสร้างเป็น initMapLP() นะคะ สร้างแล้วต้องไปเรียกใช้กันด้วยนะคะ

let panoview = GMSPanoramaView(Frame: .zero)  → เรียกใช้งาน Street Maps

self.view = panoview → เรียกให้ตัว Maps แสดงขึ้นมาบน View

panoview.moveNearCoordinate(CLLocationCoordinate2D(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)) → ให้ Maps ไปแสดงยังตำแหน่งที่เรากำหมดค่าไว้

panoview.camera = GMSPanoramaCamera(heading: 180, pitch: -10, zoom: 1) → กำหนดค่ารายละเอียดในการแสดง Maps

let position = CLLocationCoordinate2D(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude) → ประกาศ position ให้มีค่าละติจูต ลองจิจูต ตามตำแหน่งที่เรากำหนดค่าไว้

let marker = GMSMarker(position: position) → ประกาศ marker ให้เป็น GMSMarker และมีค่าเท่ากับ position

marker.panoramaView = panoview  → ให้ตัว Marker แสดงบน Maps

marker.icon = GMSMarker.markerImage(with: UIColor.orange) → กำหนดสีให้กับตัว Marker

จะเห็นได้ว่าโค้ดที่เราเอามาใส่นั้น ไม่ได้เหมือนกับโค้ดตามที่ใน Guides บอกไว้นะคะ เพราะว่าโค้ดที่อยู่ใน Guides นั้นเป็นโค้ดที่เรียกให้ตัว Maps ธรรมดาค่ะ แต่ส่วนของโค้ดที่เรานำมาใส่นั้นเป็นโค้ดที่เรียกให้ตัว Street View Maps กันนะคะ อย่างงกันนะคะ

ต่อไปจะเป็น Func การทำงานของปุ่ม Search บนด้านขวาของหน้าแอพพลิเคชั่นกันบ้างนะคะ 

เริ่มต้นด้วยให้เราไปที่หน้า main.storyboard นะคะ และสร้างตัว navigation controller ขึ้นมาค่ะ

ตรงปุ่ม Search บนด้านขวา ให้เราเลือก Bar Button Item มาเลือกวางไว้นะค่ะ และเลือก System Item เปลี่ยน type เป็น Search เราก็จะได้รูปแว่นขยายขึ้นมานะคะ

มาต่อกันเลยนะคะ ให้เราลากเส้นจากตัว bar button item ไปวางไว้ใน ViewController นะคะ และเลือกชนิดเป็น Action และ type เป็น UIBarButtonItem ค่ะ

ในส่วนของโค้ดในปุ่ม Search

ต่อมาใน func ViewController นะคะ ซื้งจะเป็นตัวแสดงสถานที่ที่เราได้ search ไปให้แสดงขึ้นมาในหน้า View ค่ะ 

let panoview = GMSPanoramaView(Frame: .zero)  → เรียกใช้งาน Street Maps

self.view = panoview → เรียกให้ตัว Maps แสดงขึ้นมาบน View

panoview.moveNearCoordinate(CLLocationCoordinate2D(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude)) → ให้ Maps ไปแสดงยังตำแหน่งที่เรา search

panoview.camera = GMSPanoramaCamera(heading: 180, pitch: -10, zoom: 1) → กำหนดค่ารายละเอียดในการแสดง Maps

let position = CLLocationCoordinate2D(latitude: place.coordinate.latitude, longitude: place.coordinate.longitude) → ประกาศ position ให้มีค่าละติจูต ลองจิจูต ตามสถานที่ที่เรา search

let marker = GMSMarker(position: position) → ประกาศ marker ให้เป็น GMSMarker และมีค่าเท่ากับ position

marker.panoramaView = panoview  → ให้ตัว Marker แสดงบน Maps

marker.icon = GMSMarker.markerImage(with: UIColor.orange) → กำหนดสีให้กับตัว Marker

self.dismiss(animated: true, completion: nil) → ปิดหน้าต่างที่แสดงอยู่ถ้ามีการรับค่าเข้ามา

func เช็ค Error ถ้าเกิด Error ให้ print Error ออกมา และ func ของปุ่ม Cancel 

เปลี่ยนสีของแถบ NavigationBar ใน func viewDidLoad

เมื่อเสร็จแล้วตามทุกขั้นให้ลองทดสอบการทำงานดูนะคะ
ถ้าทำงานได้ไม่มีปัญหาอะไรก็เป็นอันว่าได้ไปเยี่ยมชมสถานที่ต่าง ๆ สำเร็จค่ะ 55555

😳 แต่ถ้าใครยังไม่เข้าใจสามารถดูตาม Clip ได้นะคะ 😳