【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](https://cloud.google.com/maps-platform/pricing?hl=ja)

<img width="934" alt="スクリーンショット 2020-04-15 22.15.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435429/b5aad9c3-183e-5708-fcd7-a12e6c7a4434.png">

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

# インストール
[git](https://github.com/react-native-community/react-native-maps)を参考に下記コマンドを実行

```
yarn add react-native-maps
```

# セットアップ
インストールは完了しましたが、`GCP`側で処理が必要です。

## Android・iOS共通
- [GCP](https://console.cloud.google.com/?hl=ja)にてプロジェクトを作成

## iOS  
- プロジェクト内の`API設定`で`Maps SDK for iOS`を有効化。 
<img width="1399" alt="スクリーンショット 2020-04-15 22.22.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/435429/b76e6c97-83d9-a908-73ab-251066c7046f.png">
 
- Maps SDK for iOSのAPIキーを取得する  
**上記画面にて【詳細】を選択し、【認証情報】のタブを押下することで表示されます。**

- `ios/[project]/AppDelegete.m`を修正  

```delegete

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

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

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

```podfile
# 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`を修正

```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`を修正

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

# 使用方法

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

```javascript
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>
    );
}

```