Zenn
🍣

【ReactNative】react-native-maps基本編

2020/12/14に公開
JavaScript
React Native
TypeScript
Google Map
tech

はじめに

今回は、ReactNativeで地図を表示させる場合に使用するライブラリである、react-native-mapsについての紹介記事です。
インストール自体は簡単ですが、GoogleMapを使う場合は少しだけ手間がかかるので、そのあたりについても解説します。

react-native-mapsとは

https://github.com/react-native-maps/react-native-maps

ReactNativeにおける地図コンポーネントライブラリです。
個人的には地図を表示させるならこれ一択かなと思います。

インストール

以下の環境を前提とします。

  • react-native@0.63.3
  • react-native-maps@0.27.1
yarn add react-native-maps

iOSの場合はpod installが必要です。

cd ios
pod install

位置情報を使用するのでInfo.plistのNSLocationWhenInUseUsageDescriptionに記載が必要です。

<key>NSLocationWhenInUseUsageDescription</key>
<string>地図上へのプロットのために位置情報を取得します</string>

GoogleMapを使う場合

GoogleMapを使う場合はGCP側での設定が必要になります。
ちなみにGoogleMapをアプリケーションに組み込む場合には料金が発生しますが、スマホアプリの場合Maps SDK for iOSやMaps SDK for Androidを使うため無料で利用できます。

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

googlemap

続いて、iOSとAndroidでの作業を紹介します。

Android・iOS共通作業

GCPのプロジェクトを作成します。

iOS

【API設定】からMaps SDK for iOSを有効化します。

ios

画面の案内に従って表示されるMaps SDK for iOSのAPIキーを取得します。

AppDelegete.mを修正

ios/[project]/AppDelegete.mに取得したAPIキーを入力します。

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

// ...略

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

続いてios/Podfileを修正します。

# 追加
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')
    }
}

さらにAPIキーをandroid/src/main/AndroidManifest.xmlに記載します。


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

使い方

MapViewを使って地図を表示させます。
以下は固定座標で地図を全画面表示させた場合のサンプルです。

App.tsx
import React from 'react';
import {View, StyleSheet} from 'react-native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const App: React.FC = () => {
  return (
    <View style={StyleSheet.absoluteFillObject}>
      <MapView
        provider={PROVIDER_GOOGLE}
        style={StyleSheet.absoluteFillObject}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </View>
  );
};

export default App;

表示

result

まとめ

今回はreact-native-mapsの使用方法について紹介しました。
この記事では地図を表示させるところをゴールとしましたが、応用として「現在位置をプロットする」や「タップした場所にマーカーを設置する」等やれることはたくさんあります。

次回以降にreact-native-maps応用編として、それらの内容を扱っていきたいと思います。

Discussion