DeveloperFeaturedGoogle DevelopersiOS DeveloperObjective CProgramming Language

พัฒนาแอพพลิเคชัน บน iOS ด้วย Google Maps SDK for iOS

บทเรียนการพัฒนาแอพพลิเคชันบนแพลตฟอร์ม 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

Screen Shot 2557-08-29 at 8.14.10 PM

กลับไปที่ เมนู “API Access” ไป “Create New iOS Key” ล่างสุด ทันทีโดยใส่ Bundle ID ของแอพพลิเคชันของเราที่จะทำครับ

Screen Shot 2557-08-29 at 5.21.43 PM
ทำการ Create new iOS Key

ใส่ Bundle ID ลงไป

Screen Shot 2557-08-29 at 5.22.01 PM
Bundle ID ของแอพ iOS

เราจะได้ API Key มาใช้ทันทีตามภาพครับ เก็บไว้ก่อน เดี๋ยวค่อยไปยุ่งกับมันทีหลัง

Screen Shot 2557-08-29 at 5.22.51 PM

ไปดาวน์โหลด 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

Screen Shot 2557-08-29 at 5.22.16 PM

ตั้งชื่อ Bundle ID ให้ตรงกับที่เราตั้งค่าใน Google Maps SDK นะครับ

Screen Shot 2557-08-29 at 5.22.23 PM

นำ GoogleMaps.framework ที่เราดาวน์โหลดมาไปวางไว้ใน Folder ชื่อ Frameworks ของ Project ของเราให้เรียบร้อย

Screen Shot 2557-08-29 at 5.23.55 PM

เมื่อวาง Framework ลงไปแล้วให้คลิกขวาที่ Framework ของ Google Maps เลือก Open with Finder แล้วไปที่ Folder ชื่อ “Resources” ลากไฟล์ GoogleMaps.bundle ไปวางไว้ใน Folder ของ Project เราครับ

Screen Shot 2557-08-29 at 5.25.37 PM

ไปที่ 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
เพิ่ม Link Binary with Libraries
เพิ่ม Link Binary with Libraries

ไปที่ แท็บ “Build Settings” ค้นหา Other Link Flags แล้วเพิ่ม “-ObjC” ลงไป

Screen Shot 2557-08-29 at 5.28.24 PM

ต่อมาเริ่มต้นที่ การเขียน 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 ตัวแอพพลิเคชันของเรา เพื่อตรวจสอบการทำงาน

Screen Shot 2557-08-29 at 7.56.11 PM

ไม่ยากเลยใช่ไหมครับ บทเรียนต่อไปจะมีการเปลี่ยน Option ของ Google Maps SDK for iOS ของเราหลากหลายแบบครับ

Asst. Prof. Banyapon Poolsawas

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน