【ReactNative】react-native-mapsを導入する

はじめに

ReactNativeでアプリを作る過程で地図を表示させたくなったので、react-native-mapsを導入しました。
インストール自体は簡単ですが、GoogleMapを使う場合はちょっとだけ手間がかかったので備忘録として。

環境

"react-native": "0.61.5",
"react-native-maps": "^0.26.1",

料金

GoogleMapは使用量によって値段が変動します。
だいたいアプリにマップを表示させるとなると、Dynamic Mapsを使うと思いますが、2020年4月現在は下記のような料金となっています。

参考：https://cloud.google.com/maps-platform/pricing?hl=ja

Webアプリと違ってスマホアプリに組み込む場合には無料でいけるみたいです。

インストール

gitを参考に下記コマンドを実行

yarn add react-native-maps

セットアップ

インストールは完了しましたが、GCP側で処理が必要です。

Android・iOS共通

• GCPにてプロジェクトを作成

iOS

• プロジェクト内のAPI設定でMaps SDK for iOSを有効化。

• Maps SDK for iOSのAPIキーを取得する
  上記画面にて【詳細】を選択し、【認証情報】のタブを押下することで表示されます。

• ios/[project]/AppDelegete.mを修正

#import<GoogleMaps/GoogleMaps.h>  // add

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [GMSServices providAPIKey:@"【API_KEY】"]; // add
}

• ios/Podfileを修正する
  ※podを使う場合のみです

# add
pod 'react-native-google-maps', path:'../node_modules/react-native-maps'
pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

Android

• プロジェクト内のAPI設定でMaps SDK for Androidを有効化。
  ※iOSとほぼ同じなので画像は省略
• Maps SDK for AndroidのAPIキーを取得する
• android/build.gradleを修正

buildscript {
    dependencies {
        classpath('com.google.android.gms:play-services-base:10.0.1')
        classpath('com.google.android.gms:play-services-maps:10.0.1')
    }
}

• android/src/main/AndroidManifest.xmlを修正

<application>
    <meta-data 
      android:name="com.google.android.geo.API_KEY"
      android:value="【API KEY】" />
</application>

使用方法

オーソドックスに現在位置を取得してそれをマップにプロットするサンプルです。
バージョンによってはそのままでは動かないかもしれないので注意です。

import MapView, { PROVIDER_GOOGLE, Region, Marker } from 'react-native-maps';
import Geolocation, { GeolocationResponse } from '@react-native-community/geolocation';


componentDidMount(){
    // 位置情報取得処理
    Geolocation.getCurrentPosition(
        (position: GeolocationResponse) => {
            // 正常に取得できたらstateに保持
            this.setState({
                mapCenterLatitude : position.coords.latitude,
                mapCenterLongitude : position.coords.longitude,
            })
        },
        (err : any) => {
            // 位置情報取得失敗時処理
        },
        { 
            enableHighAccuracy: true, 
            timeout: 10000, 
            maximumAge: 10000
        },
    );
}

render() {

    // 現在位置をstateから取得
    const { mapCenterLatitude, mapCenterLongitude } = this.state;

    // 初期表示位置
    const initialRegion : Region = {
        latitude : mapCenterLatitude,
        longitude : mapCenterLongitude,
        latitudeDelta : 0.0460,
        longitudeDelta : 0.0260,
    }

    // 現在位置を表すピン
    const currentPin : JSX.Element = (
        <Marker pinColor={"red"} coordinate={{latitude : mapCenterLatitude, longitude : mapCenterLongitude}} />
    );

    return(
        <MapView provider={PROVIDER_GOOGLE} initialRegion={initialRegion}>
            {currentPin}
        </MapView>
    );
}