Expoで作成したiOSアプリでgoogle mapsを使う

ライブラリを用意

react-native-mapsを利用します。

expo install react-native-mapsでインストール（expoなのでlinkは行いません）

GoogleMapsを有効化する(※Expoシミュレータのみで有効)

Expoシミュレータで利用する場合、MapViewのproviderをgoogleにするだけでOKです。
<MapView provider="google" />

カスタムマップスタイルを利用したい場合は、PROVIDER_GOOGLEを指定する必要があります。

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'

// ...

<MapView
  provider={PROVIDER_GOOGLE}
  customMapStyle={MapStyle}
>

これでGoogleMapsが使えますが、このままStandaloneで動かそうとするとクラッシュします。

Standalone版でGoogleMapsを動かす

AppleMapsでは不要ですが、iOSでGoogleMapsを利用する場合は、APIキーの設定が必要です。

1. Google Cloud APIプロジェクトの登録とMaps SDK for iOSの有効化

• ブラウザでGoogle API Managerを開き、プロジェクトを作成します。
• プロジェクトが作成されたら、そのプロジェクトでMaps SDK for iOSを有効にします。

2. APIキーを作成し、本番アプリ向けにキーを制限します

• Google Cloud Credential manager（APIとサービス）にアクセスし、[認証情報]、[APIキー]の順にクリックします。
• モーダルで [キーの制限] をクリックします。
• [アプリケーションの制限] で [iOS アプリ] ラジオ ボタンを選択します。
• [リクエストを受け入れる iOS アプリのバンドル ID] で [項目を追加] ボタンをクリックします。
• app.jsonのios.bundleIdentifier（例：com.company.myapp）をバンドルIDフィールドに追加します。
• 「完了」をクリックした後、「保存」をクリックします。

3. プロジェクトにAPIキーを追加する

• ios.config.googleMapsApiKeyフィールドの下のapp.jsonにAPIキーをコピーします。
• コードの中で、react-native-mapsから{ PROVIDER_GOOGLE }をインポートして、provider=PROVIDER_GOOGLEというプロパティを<MapView>に追加します。このプロパティは、iOSとAndroidの両方で動作します。
• アプリのバイナリを再構築します。設定がうまくいったかどうかをテストする簡単な方法は、シミュレータビルドを行うことです。