expoでiosアプリ上でgoogle mapを使いたい

Question

現状

react native + expoで地図アプリ作成しております。

質問

expoでiosアプリ上にgoogle map を使用したいのですが、設定の方法が分かりません。

すでに行ったこと

リンク内容
expo公式map view に書かれていることはすでに行いました。（以下の内容)

Deploying Google Maps to a standalone app on iOS
Apple Maps will work with no extra configuration. For Google Maps:

• Open your browser to the Google API Manager and create a project, or select your existing project if you've already made one for this app.
• Go to the project and enable the Google Maps SDK for iOS
• Go back to https://console.developers.google.com/apis/credentials and click Create Credentials, then API Key.
• In the modal that popped up, click RESTRICT KEY.
• Choose the iOS apps radio button under Key restriction.
• Under Accept requests from an iOS application with one of these bundle identifiers, click the Add an item button.
• Add your ios.bundleIdentifier from app.json (eg: ca.brentvatne.growlerprowler) to the bundle ID field.
• Copy the API key (the first text input on the page) into app.json under the ios.config.googleMapsApiKey field.
• Press Save and then rebuild the app.

Answer 1

ちょうど先週同じところで詰まって解決しました。自分用メモを使って回答します。

まず、そのexpo公式ドキュメントに沿ってやったことは、合っています。
僕は、その次に、react-native-maps のドキュメントを参照しました。

GoogleMapを使用したい場合、 react-native-mapsから、
PROVIDER_GOOGLE を読み込み、<MapView>に追加します。

それが書いてあるリンクはこちらです。
react-native-mapsのドキュメント
ここの、customizing-the-map-style　を参照してください。
そこには、以下の記載があります。
> For iOS, in addition to providing the mapStyle you will need to do the following

僕のコードサンプルはこちらです。

import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';　# <<<<<　ここです！
import { StyleSheet, View, Dimensions } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <MapView
        provider={PROVIDER_GOOGLE}　# <<<<<　ここです！
        style={styles.mapStyle}
        region={{
         latitude: ***********,
         longitude: *********
       }}
      />
    </View>
  );
}

const { width, height } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  mapStyle: { width, height },
});

お役に立てれば幸いです。
僕も勉強中なので、もしこれを試したらどうなったのか、教えてくれると嬉しいです。

Comments

[abbbbe123]

丁寧にご回答ありがとうございます！
expoなしでgooglemapを実装していたので、今度expoでもトライしてみます。

[Akira25]

そうでしたか！是非！