บทเรียนการพัฒนาแอพพลิเคชันบนแพลตฟอร์ม iOS ร่วมกับ Service APIs ของ Google อย่าง Google Maps SDK for iOS สำหรับผู้เริ่มต้น กับการปรับแต่ง Maps หลากหลายรูปแบบ
เริ่มต้นพัฒนา
ก่อนอื่นต้องไป ทำการเพิ่ม Service ของ APIS ตัว Google ก่อน โดยการไปที่ https://code.google.com/apis/console/?noredirect ต้องสมัคร Google Account ก่อน เมื่อเข้าระบบแล้วไปที่เมนู Services แล้วไปเปิด Permission ของ Google Maps SDK for iOS ตามรูป เพื่อรับ API Keys
กลับไปที่ เมนู “API Access” ไป “Create New iOS Key” ล่างสุด ทันทีโดยใส่ Bundle ID ของแอพพลิเคชันของเราที่จะทำครับ
ใส่ Bundle ID ลงไป
เราจะได้ API Key มาใช้ทันทีตามภาพครับ เก็บไว้ก่อน เดี๋ยวค่อยไปยุ่งกับมันทีหลัง
ไปดาวน์โหลด Google Maps SDK for iOS ที่นี่ครับ https://developers.google.com/maps/documentation/ios/start#getting_the_google_maps_sdk_for_ios
ทำการแตกไฟล์เป็น Folder ขึ้นมาทันทีครับ เปิด XCode ขึ้นมา (ตัวอย่างบทนี้ใช้ 5.11) สร้างแอพพลิเคชันใหม่ชื่อ GoogleMapTest เป็นรูปแบบแทมเพลต Single View Application
ตั้งชื่อ Bundle ID ให้ตรงกับที่เราตั้งค่าใน Google Maps SDK นะครับ
นำ GoogleMaps.framework ที่เราดาวน์โหลดมาไปวางไว้ใน Folder ชื่อ Frameworks ของ Project ของเราให้เรียบร้อย
เมื่อวาง Framework ลงไปแล้วให้คลิกขวาที่ Framework ของ Google Maps เลือก Open with Finder แล้วไปที่ Folder ชื่อ “Resources” ลากไฟล์ GoogleMaps.bundle ไปวางไว้ใน Folder ของ Project เราครับ
ไปที่ Build Phase ของ Project ของเราทำการเพิ่ม Link Binary with Libraries ตามนี้
- AVFoundation.framework
- CoreData.framework
- CoreLocation.framework
- CoreText.framework
- GLKit.framework
- ImageIO.framework
- libc++.dylib
- libicucore.dylib
- libz.dylib
- OpenGLES.framework
- QuartzCore.framework
- SystemConfiguration.framework
ไปที่ แท็บ “Build Settings” ค้นหา Other Link Flags แล้วเพิ่ม “-ObjC” ลงไป
ต่อมาเริ่มต้นที่ การเขียน Code แล้ว ให้ไปที่ ไฟล์ AppDelegate.h ใส่ API Key และ Import Header ก่อนดังนี้
#import <GoogleMaps/GoogleMaps.h>
เพิ่ม API Keys ใน เมธอด application:didFinishLaunchingWithOptions() ดังนี้
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// Override point for customization after application launch.
[GMSServices provideAPIKey:@"API KEY"];
return YES;
}
คำสั่งที่จะเขียนกันก็คือไปแก้ไข ViewController.m ดังนี้ครับ (พิกัดตัวอย่าง ใช้ Lat,Long ใส่ลงไป)
#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>
@interface ViewController ()
{
GMSMapView *mapView_;
}
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:14.531934
longitude:102.940278
zoom:15];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
GMSMarker *marker = [[GMSMarker alloc] init];
marker.position = camera.target;
marker.snippet = @"Hello World";
marker.appearAnimation = kGMSMarkerAnimationPop;
marker.map = mapView;
self.view = mapView;
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
ทำการลอง Run ตัวแอพพลิเคชันของเรา เพื่อตรวจสอบการทำงาน
ไม่ยากเลยใช่ไหมครับ บทเรียนต่อไปจะมีการเปลี่ยน Option ของ Google Maps SDK for iOS ของเราหลากหลายแบบครับ
