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

このチュートリアルでは、マーカーが配置されたシンプルな 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 mapView = GMSMapView.map(withFrame: self.view.frame, camera: camera)
        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];
  GMSMapView *mapView = [GMSMapView mapWithFrame:self.view.frame camera:camera];
  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. [ファイル] > [パッケージ] > [パッケージ キャッシュをリセット] を使用して、パッケージ キャッシュをリセットする必要があります。

CocoaPods を使用

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

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

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

使ってみる

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

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

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

  1. 以下のインポート文がファイルに追加されていることに注意してください。
    import GoogleMaps
  2. application(_:didFinishLaunchingWithOptions:) メソッドの次の行を編集し、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 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. 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 の使用方法も確認しました。

次のステップ

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