マーカー付きの地図を追加する

このチュートリアルでは、マーカーが配置された Google マップを iOS アプリに追加する方法を説明します。Swift または Objective-C について初級から中級の知識があり、Xcode についても一般的な知識がある方に適しています。地図の作成に関する高度なガイドについては、デベロッパー ガイドをご覧ください。

このチュートリアルでは、次の地図を作成します。マーカーはオーストラリアのシドニーに配置されます。

シドニーにマーカーが表示された地図のスクリーンショット

コードを取得する

GitHub で Google Maps iOS サンプル リポジトリをダウンロードするか、クローンを作成します。

または、次のボタンをクリックしてソースコードをダウンロードします。

コードをダウンロード

Swift

import UIKit
import GoogleMaps

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        // Create a GMSCameraPosition that tells the map to display the
        // coordinate -33.86,151.20 at zoom level 6.
        let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
        let options = GMSMapViewOptions()
        options.camera = camera
        options.frame = self.view.frame
        let mapView = GMSMapView(options: options)
        self.view.addSubview(mapView)

        // Creates a marker in the center of the map.
        let marker = GMSMarker()
        marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
        marker.title = "Sydney"
        marker.snippet = "Australia"
        marker.map = mapView
  }
}
      

Objective-C

#import "ViewController.h"
#import <GoogleMaps/GoogleMaps.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
  // Do any additional setup after loading the view.
  // Create a GMSCameraPosition that tells the map to display the
  // coordinate -33.86,151.20 at zoom level 6.
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                          longitude:151.20
                                                               zoom:6];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  options.frame = self.view.frame;
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  mapView.myLocationEnabled = YES;
  [self.view addSubview:mapView];

  // Creates a marker in the center of the map.
  GMSMarker *marker = [[GMSMarker alloc] init];
  marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
  marker.title = @"Sydney";
  marker.snippet = @"Australia";
  marker.map = mapView;
}

@end
      

始める

Swift Package Manager

Maps SDK for iOS は、Swift Package Manager を使用してインストールできます。

  1. 既存の Maps SDK for iOS の依存関係を削除します。
  2. ターミナル ウィンドウを開いて、tutorials/map-with-marker ディレクトリに移動します。
  3. Xcode ワークスペースを閉じて、次のコマンドを実行します。
    sudo gem install cocoapods-deintegrate cocoapods-clean
    pod deintegrate
    pod cache clean --all
    rm Podfile
    rm map-with-marker.xcworkspace
  4. Xcode プロジェクトを開き、podfile を削除します。
  5. [File] > [Add Package Dependencies] の順に移動します。
  6. URL として https://github.com/googlemaps/ios-maps-sdk を入力し、Enter キーを押してパッケージをプルし、[パッケージを追加] をクリックします。
  7. [File] > [Packages] > [Reset Package Cache] を使用して、パッケージ キャッシュをリセットする必要がある場合があります。

API キーを取得して必要な API を有効にする

このチュートリアルを完了するには、Maps SDK for iOS の使用が承認されている Google API キーが必要です。次のボタンをクリックしてキーを取得し、API を有効にしてください。

使ってみる

詳細については、API キーを取得するをご覧ください。

API キーをアプリに追加する

次のように、API キーを AppDelegate.swift に追加します。

  1. 以下のインポート文がファイルに追加済みであることを確認します。
    import GoogleMaps
  2. application(_:didFinishLaunchingWithOptions:) メソッドで次の行を編集し、「YOUR_API_KEY」YOUR_API_KEYをお客様の API キーに置き換えます。
    GMSServices.provideAPIKey("YOUR_API_KEY")

アプリをビルドして実行する

  1. iOS デバイスをパソコンに接続するか、Xcode スキーム メニューからシミュレータを選択します。
  2. デバイスを使用している場合は、位置情報サービスが有効になっていることを確認してください。 シミュレータを使用している場合は、[機能] メニューから場所を選択します。
  3. Xcode で、[Product/Run] メニュー オプション(またはプレイボタン アイコン)をクリックします。
    • Xcode がアプリをビルドし、デバイスまたはシミュレータ上で実行します。
    • このページの画像のように、オーストラリア東海岸のシドニーにマーカーが立った地図が表示されます。

トラブルシューティング:

  • 地図が表示されない場合は、前述のとおりに API キーを取得してアプリに追加していることを確認してください。Xcode のデバッグ コンソールで、API キーに関するエラー メッセージを確認します。
  • API キーに iOS バンドル ID による制限をかけている場合は、今回のアプリのバンドル ID(com.google.examples.map-with-marker)を追加して許可してください。
  • Wi-Fi または GPS の接続状態が良好であることを確認します。
  • ログを表示してアプリをデバッグするには、Xcode デバッグツールを使用します。

コードを理解する

  1. マップを作成し、viewDidLoad() でビューとして設定します。

    Swift

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    let camera = GMSCameraPosition.camera(withLatitude: -33.86, longitude: 151.20, zoom: 6.0)
    let options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    view = mapView
          

    Objective-C

    // Create a GMSCameraPosition that tells the map to display the
    // coordinate -33.86,151.20 at zoom level 6.
    GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86
                                                            longitude:151.20
                                                                 zoom:6.0];
    GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
    options.camera = camera;
    GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
    self.view = mapView;
          
  2. viewDidLoad() で地図にマーカーを追加します。

    Swift

    // Creates a marker in the center of the map.
    let marker = GMSMarker()
    marker.position = CLLocationCoordinate2D(latitude: -33.86, longitude: 151.20)
    marker.title = "Sydney"
    marker.snippet = "Australia"
    marker.map = mapView
          

    Objective-C

    // Creates a marker in the center of the map.
    GMSMarker *marker = [[GMSMarker alloc] init];
    marker.position = CLLocationCoordinate2DMake(-33.86, 151.20);
    marker.title = @"Sydney";
    marker.snippet = @"Australia";
    marker.map = mapView;
          

デフォルトでは、Maps SDK for iOS は、ユーザーがマーカーをタップすると、情報ウィンドウのコンテンツを表示します。このデフォルト動作で問題ない場合は、マーカーのクリック リスナーを追加する必要はありません。

これで完了です。特定の場所を示すマーカーが配置された Google マップを表示する iOS アプリが作成されました。また、 Maps SDK for iOS の使用方法も確認しました。

次のステップ

地図オブジェクトと、マーカーを使ってできることについて、詳しく確認します。