มาจัดกลุ่มให้กับปักหมุดกันเถอะ ^^

สวัสดีค่ะทุกคน วันนี้เราจะมาจัดกลุ่มให้กับการปักหมุดบนแผนที่กันค่ะโดยใช้ Google maps และที่เราจะทำในวันนี้ก็คือการ Marker Clustering โดย Utillty library กันค่า และเพื่อความสวยงามเราจะใส่รูปเข้าไปด้วยค่า

ซึ่งจะใช้ GMUClusterManager และจะใช้ภาษา Swift 3.0 ใน Xcode 8 ในการทำในวันนี้ค่า

ถ้าพร้อมแล้วละก็ เราไปเริ่มกันเลยย

ขั้นตอนแรกนะคะ เราจะเริ่มทำการสร้างโปรเจคขึ้นมา และทำการเปิดเว็บไซต์

https://developers.google.com

และวันนี้เราจะทำ Maps ก็เลือกที่ Maps ได้เลยค่ะ

ให้ทำการเลือก platform ที่เราจะทำซึ่งในวันนี้เราจะทำ iOS ก็เลือกที่ iOS ได้เลยค่ะ

เลือก Google Maps SDK for iOS

คลิกที่ Guides และคำตามคำแนะนำไปที่ละ Step

ขั้นตอนที่ 1 - ทำการติดตั้ง xCode ซึ่งถ้าต้องการใช้ Google Maps จะต้องมี xCode 7.3 ขึ้นไปค่ะ

ขั้นตอนที่ 2 - ทำการสร้าง Podfile ขึ้นมาค่ะ โดยในวันนี้เราจะใช้ 2 Pod คือ GoogleMaps , Google-Maps-iOS-Utils ตามนี้ค่ะ

หลังจากนั้นก็ทำการ Pod install

และขั้นตอนถัดไปคือการสร้าง KEY โดยการกดเลือก GET A KEY ค่ะ

ขั้นตอนถัดไป จะทำการสร้าง Project ใหม่หรือใช้ Project เดิม ก็ได้นะคะ

เมื่อเรียบร้อยแล้วเราก็ไปที่ Google API Console ค่ะ ทำตามลำดับเลือก Project ที่จะใช้แล้ว Continue เลย

ไปที่หน้า Dashboard เมื่อไปที่ Dashboard ก็ทำการเช็คว่ามี API อะไรเปิดใช้งานอยู่ ซึ่งเราต้องการใช้แค่ Google Maps SDK for iOS หากยังไม่มีให้ไปที่ Library แล้วเลือก API ที่จะใช้หาเจอแล้วกดเปิดใช้งาน API นั้นก็จะมาอยู่ใน Dashboard ค่ะ

ถัดมาไปที่หน้าข้อมูลรับรองเพื่อตั้งค่า โดยเลือกที่รูปปากกาเพื่อทำการตั้งค่า

โดยการเลือก แอป iOS และใส่ Bundle ID หลังจากนั้นก็กดบันทึกได้เลยค่ะ

ขั้นตอนถัดมาก็จะไปทำงานใน xCode แล้วนะคะ

เริ่มจากการเปิด xCode โดยเปิดจากไฟล์ .xcworkspace นะคะ เข้าไปที่ไฟล์ AppDelegate.swift เพื่อทำการเพิ่มคำสั่ง import GoogleMaps ลงไปในส่วน func didFinishLaunchingWithOptions ตามภาพค่ะ

ในส่วนของ Key จะได้มาจากข้อมูลผู้รองรับ ตามขั้นตอนก่อนหน้าค่ะ

ขั้นตอนถัดไปให้ทำการสร้างไฟล์ Objective-C

และเลือก Create Bridging Header

และในไฟล์ .h เราจะทำการใส่

#import <Google-Maps-iOS-Utils/GMUMarkerClustering.h>

ก่อนที่จะไปทำการใส่โค้ดนะคะ เราจะใส่รูปเข้าไป โดยรูปที่เรานำมาจะใช้เป็นรูปที่แสดงตอนการรวมกลุ่มของปักหมุดเกิดขึ้น เพื่อความสวยงามเฉยๆค่า โดยการรวมกลุ่มของเราจะรวมตั้งแต่ 10 , 20 , 50 , 100 , 200 เราจึงใช้ทั้งหมด 5 รูปตัวอย่างดังภาพ