📲

ExpoをejectしてGoogle Mapを表示させる

2024/08/17に公開

React Native

先日、公式ドキュメントにそってexpoでgoogle mapを使おうとすると以下のエラーがでました。

react-native-maps: AirGoogleMaps dir must be added to your xCode project to support GoogleMaps on iOS.

どうやらExpoのv５１からGoogle Mapがサポートされなくなったようです。

Hi there! Google Maps is no longer supported in Expo Go for iOS. You can use Apple Maps in Expo Go instead (remove the prop provider={PROVIDER_GOOGLE} from your <MapView /> components) or switch to a development build (recommended). If you have already configured Google Maps for your production releases, no additional configuration will be necessary. Learn how to set up a development build.

Google Mapを使う場合はejectすることが推奨されているので、ejectしてからどのようにGoogle Mapを表示させるのか、記事がなかったので共有しておきます。

以下は作成したexpoアプリケーションをejectしてGoogle　Mapを表示させるまでを行なったリポジトリです。

Google Cloud Platform Consoleで`Maps SDK for iOS`のAPIを有効にする

Google Mapsを使用するためには、Google Cloud Platform で API キーを作成し、有効にする必要があります。
使用するプロジェクトでMaps SDK for iOSを有効にしておきます。

apiキーを使うときは不正使用対策として使用を制限するようにしましょう。

制限の手順

Google Cloud Credential managerにアクセスし、認証情報を作成、API Keyの順にクリックします。
モーダルで、Edit API keyをクリックします。
キーの制限 > アプリケーションの制限で、iOSアプリを選択します。
iOSの制限 で、Add an item ボタンをクリックします。
app.json の ios.bundleIdentifier をバンドル ID フィールドに追加します。

bundleIdentifier が未設定の場合は設定してください。

"ios": {
"bundleIdentifier": "com.example.myapp", // 任意に設定する
},

完了をクリックし、保存をクリックします。

ここで発行されたAPIのキーは後ほど必要になるので、保存しておきます。

1. ライブラリのインストール

ここでExpoアプリに戻り、react-native-maps をインストールします。

npx expo install react-native-maps

expoをejectする

以下のコマンドでBare workflowにする

npx expo prebuild --platform ios

そうすると/iosディレクトリが作成され、ネイティブコードが作られます。

Podfileにライブラリを追加してネイティブアプリにインストール

/ios/Podfile に以下を追加します。

target 'myapp' do
use_expo_modules!
pod 'react-native-google-maps', path: '../node_modules/react-native-maps' # 追加

...

CocoaPods をインストールします。

cd ios && pod install

AppDelegate.m(m)またはAppDelegate.swiftに以下を追加

#import <GoogleMaps/GoogleMaps.h>. // 追加

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [GMSServices provideAPIKey:@"YOUR_API_KEY"]; // APIキーを入れて追加。末尾の「;」を忘れないよう注意
  // ...
}

このファイルではアプリのライフタイムイベントを管理しているようです。

4. Google Maps をコンポーネントで使用

設定が完了したら、以下のようにコンポーネントでGoogle Mapsを使用できます。

import { PROVIDER_GOOGLE } from "react-native-maps";
import MapView from "react-native-maps";

<MapView style={styles.map} provider={PROVIDER_GOOGLE}></MapView>

これで無事にレンダリングされれば成功👌

さいごに

最近Expoを触り始めたばかりですが、バージョンの変更にドキュメントが追いついていない箇所がいくつかありそうでした。ドキュメント通りにやってもうまくいかない場合はissueが出ていないかみる必要がありますね。