マーカーが配置された地図を追加する

このチュートリアルでは、Google マップを iOS アプリに追加する方法を説明します。地図には、特定の場所を示すマーカー(ピンとも呼ばれます)が配置されています。

コードの取得

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

開発プロジェクトを設定する

Maps SDK for iOS をインストールする手順は次のとおりです。

  1. Xcode バージョン 14.0 以降をダウンロードしてインストールします。
  2. CocoaPods をまだインストールしていない場合は、ターミナルから次のコマンドを実行して macOS にインストールします。
    sudo gem install cocoapods
  3. Google マップ iOS サンプル リポジトリのクローンを作成するか、ダウンロードします。
  4. tutorials/map-with-marker ディレクトリに移動します。
  5. pod install コマンドを実行します。これにより、Podfile で指定された API とその依存関係がインストールされます。
  6. pod outdated を実行して、インストールされている Pod のバージョンを新しい更新と比較します。新しいバージョンが検出された場合は、pod update を実行して Podfile を更新し、最新の SDK をインストールします。詳細については、CocoaPods ガイドをご覧ください。
  7. プロジェクトの map-with-marker.xcworkspace ファイルを(ダブルクリックして)Xcode で開きます。プロジェクトを開くには、.xcworkspace ファイルを使用する必要があります。

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

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

使ってみる

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

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

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

  1. 次の import ステートメントがファイルに追加されています。
    import GoogleMaps
  2. application(_:didFinishLaunchingWithOptions:) メソッドで次の行を編集します。YOUR_API_KEY は、API キーに置き換えます。
    GMSServices.provideAPIKey("YOUR_API_KEY")

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

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

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

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

コードを理解する

  1. 地図を作成し、loadView() でビューとして設定します。

    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 mapView = GMSMapView.map(withFrame: CGRect.zero, camera: camera)
    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];
    GMSMapView *mapView = [[GMSMapView alloc] initWithFrame: CGRectZero camera:camera];
    self.view = mapView;
          
  2. loadView() で地図にマーカーを追加します。

    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 の使用方法も確認しました。

次のステップ

詳しくは、地図オブジェクトマーカーを使用する方法をご覧ください。