GoogleStreetView กับคำอธิบายง่ายๆ

1.เริ่มแรกทำสร้างโปรเจคขึ้นมาโดยไปที่ xcode แล้วไปที่ File -> New -> Project... ดังภาพที่ 1 

ภาพที่ 1 

      

ภาพที่ 2

ภาพที่ 3

  2.จากนั้นตั้งชื่อโปรเจคและกด Next ดังภาพที่ 2 แล้วหลังจากเลือกตำแหน่งที่ไฟล์โปรเจคที่จะทำการบันทึกแล้วกด Create ดังภาพที่ 3 

ภาพที่ 4

  3.หลังจากนั้นเข้าไปหน้าที่เป็นชื่อไฟล์โปรเจคแล้วเปิดทิ้งไว้ ดังภาพที่ 4

 (ปล.ตัวอย่างโปรเจคนี้ไฟล์ชื่อ "MapCal") 

ภาพที่ 5 

   4.ไปที่ google โดยใช้ Chrom หรือ Safari ดังภาพที่ 5 

ภาพที่ 6

  5.ค้นหาคำว่า "google console map" ใน google แล้วเลือก "Google API Console" ดังภาพที่ 6 

(แนะนำให้ล็อคอิน Email ก่อน)

ภาพที่ 7 

 6.ไปที่ Credentials แล้วเลือกที่ "Create credentials" เพื่อสร้าง API Key

ภาพที่ 8 

  7.คลิ๊กที่ API key ดังภาพที่ 8

ภาพที่ 9

   8.คลิ๊กที่ "RESTRICT KEY" เพื่อทำการสร้าง API key

ภาพที่ 10

ภาพที่ 11

   9.ทำการตั้งชื่อที่ Name แล้วหลังจากนั้นเลือกจาก None เป็น iOS apps แล้วหลังจากกลับไปที่

ตัวโปรเจคที่ให้เปิดโปรเจคที่ให้ค้างไว้ในขั้นตอนที่ 4 แล้วนำ Bundle Identifiers มาใส่ ดังภาพที่ 10 แล้วกด Save หลังจากนั้นเปิดหน้านี้ทิ้งไว้

(ปล.จากภาพที่ 10 Name สามารถตั้งอะไรก็ได้ตามใจชอบ แต่ Bundle Identifiers ต้องเป็น 

Bundle Identifiers จากตัวโปรเจคที่เราต้องการทำ)

ภาพที่ 12

   10.เปิด Terminal ขึ้นมาแล้วพิมพ์ cd แล้วนำโฟลเดอร์โปรเจคที่สร้างไว้แต่แรกลากเข้ามาใน Terminal ดังภาพที่ 12 แล้วกด Enter (ปล1.Terminal สามารถหาได้โดยการไปที่ Launchpad แล้ว Search คำว่า  Terminal ปล2. ขั้นตอนที่ 10 เป็นการหาตำแหน่งของโปรเจคเรา)

ภาพที่ 13

 11.ทำการพิมพ์ pod init ดังภาพที่ 13 แล้วกด Enter เพื่อทำการสร้างไฟล์ Podfile สำหรับขั้นตอนต่อไป 

(อย่าพึ่งปิด Terminal นะ) 

ภาพที่ 14 

  12.ไปที่โฟลเดอร์โปรเจคจะเห็นไฟล์ Podfile ดังภาพที่ 14

ภาพที่ 15

   13.ทำการเปิด Podfile แล้วพิมพ์ pod ‘GoogleMaps’ , pod ‘GooglePlaces’ , pod ‘Alamofire' 

และ pod 'SwiftyJSON' ดังภาพที่ 15แล้วทำการ Save แล้วปิดไป (ปล.Save กดปุ่ม command+s)

ภาพที่ 16 

   14.กลับมาที่หน้า Terminal แล้วพิมพ์ pod install ดังภาพที่ 16 แล้วกด Enter 

(ปล.ในขั้นตอนนี้เป็นการติดตั้ง pod ที่เราได้ทำการพิมพ์ไว้ใน Podfile)

ภาพที่ 17

   15.เมื่อ install เรียบร้อยแล้วจะเป็นดังภาพที่ 17 แล้วหลังจากนี้จึงจะปิด Terminal ไปได้ 

ภาพที่ 18

   16.ไปที่โฟลเดอร์โปรเจคเปิดที่เราจะทำเปิดมันขึ้นมาจะเห็นไฟล์ที่ตามด้วยนาสกุล .xcworkspace 

ดังภาพ 18 หลังจากนั้นเปิดมันขึ้นมา (ปล.เราจะใช้ไฟล์ที่มีนามสกุล .xcworkspace ในการทำโปรเจค)

ภาพที่ 19 

   17.เมื่อเปิดโปรเจคแล้วไปที่ AppDelegate.swift แล้วทำการ import GoogleMaps และพิมพ์ 

GMSServices.provideAPIKey("Key") ลงในฟังก์ชัน application ดังภาพที่ 19 

(Key คือ รหัส Key ของ API Key ที่เราใช้ดังภาพที่ 11)

ภาพที่ 20 

   18.ไปที่ ViewController.swift ทำการ import GoogleMaps แล้วหลังจากนั้นแล้วพิมพ์

               let panoView = GMSPanoramaView(frame: .zero)

               panoView.delegate = self
               self.view = panoView
     
               panoView.moveNearCoordinate(CLLocationCoordinate2DMake(14.038985, 100.616019))

    ลงไปในฟังก์ชัน viewDidLoad  (ปล.ในขั้นตอนนี้เป็นการประกาศตัวแปรสำหรับใช้โหมดพอโนราม่าและเป็นการเลือกตำแน่งแรกที่เป็นจุดเริ่มต้น) และหลังจากนั้นพิมพ์

extension ViewController: GMSPanoramaViewDelegate{
    func panoramaView(view: GMSPanoramaView!, error: NSError!, onMoveNearCoordinate coordinate: CLLocationCoordinate2D)
    {
        print("\(coordinate.latitude) \(coordinate.longitude) not available")
    }
}


 นอกคลาส ViewController  ดังภาพที่ 20 (ปล.ในขั้นตอนนี้เป็นการบอกว่าจะใช้โหมดพาโนราม่าใน ViewController)

ภาพที่ 21

   19.เพียงเท่านี้ก็จะได้โหมดพาโนราม่าที่เริ่ม ณ มหาวิทยาลัยกรุงเทพวิทยาเขตรังสิต ดังภาพที่  20 แล้ว

คลิปสั้นๆสำหรับอธิบายบทความข้างต้น