มาใช้ Google Maps กับ iOS App กันเถอะนะ

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

หน้าเว็บ https://developers.google.com

เมื่อเตรียมทุกอย่างพร้อมแล้ว ก่อนจะไปเริ่มเรามาดูเป้าหมายกันก่อนนะคะ ว่าเราจะทำอะไรกันน่ะ งานของเราคือ จะสร้างแอปพลิเคชันที่แสดง Map ของ Google บนหน้าแอปพลิเคชัน แล้วสามารถแสดงได้ด้วยว่า ณ ตำแหน่งที่อยู่ปัจจุบันของเรา (Current Location) ของเราตอนนี้ เราอยู่ที่ไหนน่ะค่ะ

ตัวอย่างการทำงานของแอปพลิเคชัน

พร้อมละเริ่มเลยจ้าาาาา 😉  เมื่อเราเข้าเว็บ google และเลือก Maps แล้ว หน้าถัดไปที่เราจะเจอคือ ให้เราเลือกค่ะ ว่าเราจะสร้างแอปพลิเคชันสำหรับอะไร Android iOS Web หรืออะไร ??? ซึ่งเราจะเลือก iOS อยู่แล้วเนอะ

หน้าแสดง platform ที่รองรับการทำงาน

การทำงานสำหรับ platform iOS

จากนั้นเราอยากใช้ API อะไร ง่ายๆ ก่อนนะคะ เราเลือก Google Maps SDK for iOS ค่ะ หน้าถัดไปที่เราจะเจอเป็นหน้า Tutorials ซึ่งเราเลือกได้ว่าอยากได้ Map หน้าตาแบบไหน ของเราเน้นที่ง่ายๆ เนอะ

ในเมื่อเน้นง่าย ก็ไปที่ GUIDES ก่อนละกันค่ะ แล้วทำตาม Step ในรูปค่ะ (ถ้าทำตาม Step เราจะได้ Google Maps บนแอปพลิเคชันเลยค่ะ 😚😚)

ลำดับการสร้างแอปพลิเคชัน

มาค่ะ เรามาไล่กันนะ Step ที่ 1-2 นี่ไม่มีอะไร แค่ติดตั้ง XCode กับ CocoaPods ซึ่งเรามีอยู่แล้วล่ะค่ะ ถ้าตามมาตั้งแต่บทความของ Firebase จากนั้นก็สร้าง Podfile ค่ะ โดยเราจะ pod 2 อันคือ GoogleMaps กับ GooglePlaces ค่ะ ตามนี้เลย

แล้วก็ pod install ค่ะ ระหว่างรอเราไป Setting ในเว็บกันหน่อยเนอะ ใน Step 4 คือให้เราไปสร้าง Key เราก็สร้างค่ะ ทำตามเลย กดที่ Get A Key จากนั้น จะสร้าง Project ใหม่หรือใช้ Project เดิม อันนี้แล้วแต่เลยจ้าาา เรียบร้อบแล้วเราก็ไปที่ Google API Console ค่ะ ทำตามลำดับเลือก Project ที่จะใช้แล้ว Continue เลยนะคะ 

จะเข้าสู่หน้า API Console

เมื่อไปที่ Google API Console แล้ว เราไปที่ Dashboard ค่ะ ดูว่าเรามี API อะไรเปิดอยู่บ้าง ของเราต้องการ 2 อันนะคะ คือ Google Maps SDK for iOS กับ Google Places API for iOS หากยังไม่มีให้ไปที่ Library แล้วเลือก API ที่จะใช้หาเจอแล้วกด Enable แล้ว API นั้นก็จะมาอยู่ใน Dashboard ตามภาพค่ะ

หน้า Dashboard ของ Google API Console

ถัดมาคือไปจัดการที่ Creditails ค่ะ โดยเราอยากใช้ Key ไหนกับ Project เราก็กดที่รูปปากกาเพื่อ Edit จากนั้นจะเข้าสู่หน้านี้ค่ะ

หน้า Edit ของ Credentials

เราก็เลือกเป็น iOS นะคะ แล้วใส่ Budle ID ของแอปพลิเคชันเราลงไปค่ะ เวลาไปทำงานมันจะได้รู้จักกันค่ะ เสร็จแล้วก็ Save เลยค่ะ เท่านี้ก็ OK แล้วค่ะ ไปดูต่อว่า หลังจาก Google Console แล้วต้องทำอะไรต่อ

Step 5 เป็นการ Add Key ไปที่แอปพลิเคชันของเรานั่นเอง ปิด XCode แป๊บนะคะ แล้วเปิดจากไฟล์ที่เป็น .xcworkspace ค่ะ เข้าไปที่ไฟล์ AppDelegate.swift เพิ่มคำสั่ง import GoogleMaps กับ import GooglePlaces ลงไปค่ะ ส่วนใน func didFinishLaunchingWithOptions ให้ใส่ 2 คำสั่งนี้ลงไปค่ะ

นิดนึงนะคะ YOUR_API_KEY นี่เป็นของตัวเองนะจ๊ะ อย่าลืมไปเอา Key ตรงเมนู Credentials มาด้วยนะคะ อิอิ

ถัดมา Step 6 เราไปที่ไฟล์ ViewController ที่เราต้องการให้แสดง Maps ค่ะ (ในบทความนี้เป็น ViewController.swift)  ซึ่งเราจะต้อง import GoogleMaps ก่อนนะคะ จากนั้นสร้าง function สักอัน เราสร้างเป็น initMapGM() ละกันค่ะ สร้างแล้วอย่าลืมเรียกใช้นะคะ การทำงานของ function นี้เราไป copy จากเว็บมาวางเลยค่ะ

เพียงเท่านี้พอดเราลองทดสอบ Run simulator ดูเราก็จะได้ Google Maps ที่มีหมุดปักอยู่ที่ Sydney Australia ด้วยนะเอออ เพิ่มอีกนิดส่วนของ info.plist เราสามารถใส่

ลงไปได้ด้วยนะคะ เวลาที่ผู้ใช้งานแตะที่ logo google maps ในแอป จะเปิดไปที่ Google Maps App ให้น่ะค่ะ

พักครึ่งหน่อยนะคะ เอาคลิปมาอธิบายเพิ่มสำหรับส่วนของการติดตั้ง Google Maps นะคะ

ส่วนต่อมาเมื่อเราสร้าง Google Maps ได้แล้ว งานถัดมาคือทำ Current Location กันค่ะ งานนี้เราต้องใช้การทำงานของ iOS ส่วนของ CLLocationManager ด้วยล่ะ ก่อนอื่นจากงานที่เราทำมา เราไปวาง Layout สำหรับแสดง Map ก่อนนะคะ ไปที่ Main.storyboard แล้วเรา UIView มาวางเต็มจอเลยค่ะ เท่านั้นไม่พอ ให้กำหนด Custom Class เป็น GMSMapView ด้วยนะคะ

กำหนด Custom Class ให้ UIView

เมื่อกำหนดแล้วให้ประกาศ IBOutlet ให้ไฟล์ viewcontroller ที่เราจะให้แสดง Map ด้วยนะคะ ดูดีๆ นะ type ต้องเป็น GMSMapView นะคะ

พร้อมแล้วมาลุย Code กัน ให้เราใส่ส่วนของ Class ด้วย CLLocationManagerDelegate กับ GMSMapViewDelegate 

ประกาศตัวแปรแบบ Global สักตัวเป็น var locationManager = CLLocationManger() เอาไว้ตรวจสอบตำแหน่งเนี่ยแหล่ะค่ะ  โดยใน Code viewDidLoad() เราจะใส่

ซึ่ง .requestWhenInUseAuthorization เป็นการสอบถามผู้ใช้ว่า ต้องการให้ set Location Service Alway เมื่อมีการใช้งานแอปตลอดเลยหรือไม่ ทั้งนี้เราต้องเพิ่มใน info.plist ด้วย

สำหรับเรียกใช้การทำงานให้มี Alert สอบถามผู้ใช้งานว่าต้องการเปิดสิทธิ์ให้แอปพลิเคชันนี้เรียกใช้ Location ตลอดหรือไม่

การทำงานของ Location ที่เราจะใช้กันมี 2 Function  ดังนี้

ซึ่ง func didUpdateLocations จะเป็นการทำงานที่ดึงค่า ณ ตำแหน่งปัจจุบันมา ทั้งนี้ค่าที่ได้ของตำแหน่งจะเก็บอยู่ที่ตัวแปร location เมื่อเราได้ตำแหน่งแล้วก็นำมากำหนดมุมมองและแสดงผลใน googleView ของเรานั่นเองค่ะ

เพียงเท่านี้เราก็จะได้มุมมองของ Google Maps แล้วค่ะ แก้ไขคำสั่งนิดนึงนะคะ ใน func initMapGM เพื่อไม่ให้เกิด Error กรณีที่เรียกใช้ Current Location เพราะจะเกิดความซ้ำซ้อนของตัว view น่ะค่ะ โปรแกรมมันงง 5555

เสร็จแล้วทดสอบการทำงานดูค่ะ ถ้า งง ลองดูใน Clip แล้วกันนะจ๊ะ