しょぼしょぼプログラマ雑記

自分のための備忘録。 開発記録など掲載してます。 質問・ご意見・ご感想等はTwitter ( https://twitter.com/yun_hokuto ) までお気軽にどうぞ。

iPhoneアプリでGoogleMapを使う際の基礎

iPhoneiPadのデフォルト機能の中に「MapKit」と「CoreLocation」というライブラリがあります。

簡単に言うとそれぞれ地図とGPSですね。

この2つを組み合わせることで、現在位置を地図に表示したりすることが出来ますが、

「機能が高級すぎて使いこなせない」「それほど拘りがない」など様々な事情があり、

Google Mapを使いたい」という人もいるかと思います。

かく言う自分は「地図を使うなら極力Google Mapsを使いたい」派です。

メールはGmail、カレンダーはGoogle Calendarです(ぉぃ

さて、iPhoneアプリの開発でGoogle Mapsを使う方法をご紹介します。

と言っても、実は基本的な導入方法は下記のサイト様をご覧ください。

では何故導入方法をすっ飛ばしているかと言いますと、

Google Maps SDK for iOS の導入方法は書いてあっても、使い方が全然出てこない」からです。

開発していく中で必要になってくるであろう機能の使い方等をご紹介し、

皆様の開発ライフを少しでも楽にして差し上げられれば・・・

そんな風に思って書いております。

というわけで下記に少しだけですが用意してみました。


動作条件
Google Maps SDK for iOS が導入されている(記述時点でv1.9.1)


地図を表示する

ViewController.h

#import <UIKit/UIKit.h>
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController : UIViewController

@property (nonatomic) GMSMapView *gmapView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize gmapView;

- (void)viewDidLoad {
    [super viewDidLoad];
        
    float latitude = 35.172333;
    float longitude = 136.908351;
    float zoom = 18;
        
    // Google Mapsを表示
    GMSCameraPosition *cameraPosition = [GMSCameraPosition cameraWithLatitude:latitude  longitude:longitude zoom:zoom];
    self.gmapView = [GMSMapView mapWithFrame:CGRectMake(10, 20, 300, 300) camera:cameraPosition];
    self.gmapView.myLocationEnabled = YES;
        
    [self.view addSubview:self.gmapView];
}

@end

地図のタップイベントを取得し、座標をログに出力する

ViewController.h

#import <UIKit/UIKit.h>
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController : UIViewController <GMSMapViewDelegate>

@property (nonatomic) GMSMapView *gmapView;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize gmapView;

- (void)viewDidLoad {
    [super viewDidLoad];
        
    float latitude = 35.172333;
    float longitude = 136.908351;
    float zoom = 18;
        
    // Google Mapsを表示
    GMSCameraPosition *cameraPosition = [GMSCameraPosition cameraWithLatitude:latitude  longitude:longitude zoom:zoom];
    self.gmapView = [GMSMapView mapWithFrame:CGRectMake(10, 20, 300, 300) camera:cameraPosition];
    self.gmapView.myLocationEnabled = YES;
    self.gmapView.delegate = self;
        
    [self.view addSubview:self.gmapView];
}

/**
 * Google Maps タップ時デリゲートメソッド
 * @param GMSMapView mapView マップオブジェクト
 * @param CLLocationCoordinate2D coordinate タップ地点位置情報
 */
-(void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate
{
    NSLog(@"latitude:%f, longitude:%f", coordinate.latitude, coordinate.longitude);
}

@end

地図をタップしたらピンをたてる

ViewController.h

#import <UIKit/UIKit.h>
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController : UIViewController <GMSMapViewDelegate>

@property (nonatomic) GMSMapView *gmapView;
@property (nonatomic) GMSMarker *marker;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize gmapView;
@synthesize marker;

- (void)viewDidLoad {
    [super viewDidLoad];
        
    float latitude = 35.172333;
    float longitude = 136.908351;
    float zoom = 18;
        
    // Google Mapsを表示
    GMSCameraPosition *cameraPosition = [GMSCameraPosition cameraWithLatitude:latitude  longitude:longitude zoom:zoom];
    self.gmapView = [GMSMapView mapWithFrame:CGRectMake(10, 20, 300, 300) camera:cameraPosition];
    self.gmapView.myLocationEnabled = YES;
    self.gmapView.delegate = self;
        
    [self.view addSubview:self.gmapView];
}

/**
 * Google Maps タップ時デリゲートメソッド
 * @param GMSMapView mapView マップオブジェクト
 * @param CLLocationCoordinate2D coordinate タップ地点位置情報
 */
-(void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate
{
    NSLog(@"latitude:%f, longitude:%f", coordinate.latitude, coordinate.longitude);

    // マーカーを設定
    if(!self.marker) {
        self.marker = [[GMSMarker alloc] init];
        // マーカーの色を変える
        self.marker.icon = [GMSMarker markerImageWithColor:[UIColor blueColor]];
        // マーカーを任意の画像にする
        //     self.marker.icon = [UIImage imageNamed:@"pin@3x.png"];
        // マーカーを設置するマップを設定
        self.marker.map = self.gmapView;
        
        // マーカーの設置アニメーションを設定
        self.marker.appearAnimation = kGMSMarkerAnimationPop;
    }
    self.marker.position = coordinate;        
}

@end

地図をタップしたらピンをたて、タップ位置を中心に円を描く

ViewController.h

#import <UIKit/UIKit.h>
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController : UIViewController <GMSMapViewDelegate>

@property (nonatomic) GMSMapView *gmapView;
@property (nonatomic) GMSMarker *marker;
@property (nonatomic) GMSCircle *circle;

@end

ViewController.m

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

@synthesize gmapView;
@synthesize marker;
@synthesize circle;

- (void)viewDidLoad {
    [super viewDidLoad];
        
    float latitude = 35.172333;
    float longitude = 136.908351;
    float zoom = 18;
        
    // Google Mapsを表示
    GMSCameraPosition *cameraPosition = [GMSCameraPosition cameraWithLatitude:latitude  longitude:longitude zoom:zoom];
    self.gmapView = [GMSMapView mapWithFrame:CGRectMake(10, 20, 300, 300) camera:cameraPosition];
    self.gmapView.myLocationEnabled = YES;
    self.gmapView.delegate = self;
        
    [self.view addSubview:self.gmapView];
}

/**
 * Google Maps タップ時デリゲートメソッド
 * @param GMSMapView mapView マップオブジェクト
 * @param CLLocationCoordinate2D coordinate タップ地点位置情報
 */
-(void)mapView:(GMSMapView *)mapView didTapAtCoordinate:(CLLocationCoordinate2D)coordinate
{
    NSLog(@"latitude:%f, longitude:%f", coordinate.latitude, coordinate.longitude);

    // マーカーを設定
    if(!self.marker) {
        self.marker = [[GMSMarker alloc] init];
        // マーカーの色を変える
        self.marker.icon = [GMSMarker markerImageWithColor:[UIColor blueColor]];
        // マーカーを任意の画像にする
        //     self.marker.icon = [UIImage imageNamed:@"pin@3x.png"];
        // マーカーを設置するマップを設定
        self.marker.map = self.gmapView;
        
        // マーカーの設置アニメーションを設定
        self.marker.appearAnimation = kGMSMarkerAnimationPop;
    }
    self.marker.position = coordinate;

    // 地図にサークルを設置
    if(!self.circle) {
        self.circle = [[GMSCircle alloc] init];
        // 半径を設定(単位はメートル)
        self.circle.radius = 25.0f;
        // 円の外周線の太さ
        self.circle.strokeWidth = 2.0f;
        // 円の外周線の色
        self.circle.strokeColor = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f];
        // 円の内部を塗りつぶす色(未指定の場合、透明になる)
        self.circle.fillColor = [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:0.3f];
    }
    // 座標を指定(マップを設定する前に座標を指定しないとメモリでエラーが起きる)
    self.circle.position = coordinate;
    self.circle.map = self.gmapView;
}

@end

とりあえずこんなところでいかがでしょうか?

まだ、線を引いたりすることも出来るみたいですが、今回はちょっと端折りました。
TwitterFacebookの方へ、掲載希望の連絡があれば記載するかも?

詳しくは Google Maps SDK for iOS の公式サイトにリファレンス(英語)がありますので、そちらをご覧ください。

ではでは、今回はこの辺りで。