目次

1. 概要
2. react-native-mapsインストール
3. ライブラリの連結
   • 0.60以上
   • 0.59以下
4. iOSでグーグルマップを使う方法
5. 使い方
   • Appleマップ
   • Googleマップ
   • 地図の初期位置設定
   • 地図へマーカー(Marker)を表示
   • 地図の位置を追跡する
   • ユーザーの現在位置を表示
   • ユーザの位置情報の追跡表示
   • その他の機能
6. 完了

概要

React Nativeで地図を表示して、現在の位置情報を表示する方法について調べてみようかと思っています。React Nativeで地図をコントロールするためにはReact Nativeコミュニティーのreact-native-mapsライブラリを良く使っています。

今回のブログではreact-native-mapsを使ってReact Nativeで地図を表示して、現在の位置情報を地図の上に表示する方法について調べてみます。

このブログで紹介するソースコードはgithubで確認することができます。。

• github: react-native-map-example

例題ソースコードは下記の内容が適用されています。もっと詳しく知りたい方は下記のリンクを参考してください。

• typescript
• styled-components
• root-import
• React Nativeで現在位置情報を取得する方法

react-native-mapsインストール

下記のコマンドでreact-native-mapsをインストールします。

npm install --save react-native-maps

ライブラリの連結

インストールしたライブラリをReact Nativeプロジェクトに連結する必要があります。

0.60以上

下記のコマンドでreact-native-mapsをReact Nativeプロジェクトへ連結します。

cd ios
pod install
cd ..

0.59以下

下記のコマンドでreact-native-mapsをReact Nativeプロジェクトへ連結します。

react-native link react-native-maps

手動で連結する方法については公式サイトを参考してください。

• iOS - Using CocoaPods (React Native 0.59 and lower)
• Build configuration on Android

iOSでグーグルマップを使う方法

0.60以上のバージョンでは、iOSでグーグルマップを使うため、ios/[project name]/AppDelegate.mファイルを開いて下記のように修正します。

#import <GoogleMaps/GoogleMaps.h>

@implementation AppDelegate
...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
+  [GMSServices provideAPIKey:@"_YOUR_API_KEY_"]; // add this line using the api key obtained from Google Console
...

そしてios/Podfileを開いて下記のように修正します。

...
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

# react-native-maps dependencies
pod 'react-native-maps', path: '../node_modules/react-native-maps'
  pod 'react-native-google-maps', path: '../node_modules/react-native-maps'  # Remove this line if you don't want to support GoogleMaps on iOS
pod 'GoogleMaps'  # Remove this line if you don't want to support GoogleMaps on iOS
pod 'Google-Maps-iOS-Utils' # Remove this line if you don't want to support GoogleMaps on iOS

target 'ReactNativeMapExampleTests' do
...

最後に下記のコマンドを実行してiOSに必要なライブラリをインストールします。

cd ios
pod install
cd ..

0.59以下バージョンを使っている方は公式サイトを参考してください。

• Enabling Google Maps on iOS (React Native all versions)

使い方

react-native-mapsを使って地図を表示したいところに下記のように修正します。

Appleマップ

Appleマップを使って地図を表示するためには、下記のように修正します。

import React from 'react';
import Styled from 'styled-components/native';
import MapView from 'react-native-maps';

const Container = Styled.View`
    flex: 1;
`;

const AppleMap = () => {
  return (
    <Container>
      <MapView style={{flex: 1}} />
    </Container>
  );
};

export default AppleMap;

下記のコマンドでReact Nativeを実行すると

npm run ios
# android
# npm run android

下記のような結果画面を見ることができます。

Googleマップ

グーグルマップを使うためには下記のように修正します。

import React from 'react';
import Styled from 'styled-components/native';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';

const Container = Styled.View`
    flex: 1;
`;

const GoogleMap = () => {
  return (
    <Container>
      <MapView style={{flex: 1}} provider={PROVIDER_GOOGLE} />
    </Container>
  );
};

export default GoogleMap;

下記のコマンドでReact Nativeプロジェクトを実行すると

npm run ios
# android
# npm run android

下記のような結果画面を見ることができます。

(ここでグーグルマップが表示されない理由は、例題にあるprovideAPIKeyを使ったためです。皆さんが正しいprovideAPIKeyを使うとグーグルマップが表示されることが確認できます。)

地図の初期位置設定

下記のように修正すると、地図の初期位置を設定することができます。

import React from 'react';
import Styled from 'styled-components/native';
import MapView from 'react-native-maps';

const Container = Styled.View`
    flex: 1;
`;

const InitialLocation = () => {
  return (
    <Container>
      <MapView
        style={{flex: 1}}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      />
    </Container>
  );
};

export default InitialLocation;

地図へマーカー(Marker)を表示

下記のように修正すると、地図の上にマーカー(Marker)を表示することができます。

import React from 'react';
import Styled from 'styled-components/native';
import MapView, {Marker} from 'react-native-maps';

const Container = Styled.View`
    flex: 1;
`;

const MarkerOnMap = () => {
  return (
    <Container>
      <MapView
        style={{flex: 1}}
        initialRegion={{
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}>
        <Marker
          coordinate={{latitude: 37.78825, longitude: -122.4324}}
          title="this is a marker"
          description="this is a marker example"
        />
      </MapView>
    </Container>
  );
};

export default MarkerOnMap;

地図の位置を追跡する

MapViewのonRegionChangeとonRegionChangeCompleteを使えば、地図の位置が変更されたことを追跡できます。

<MapView
  onRegionChange={region => {
    setLocation({
      latitude: region.latitude,
      longitude: region.longitude,
    });
  }}
  onRegionChangeComplete={region => {
    setLocation({
      latitude: region.latitude,
      longitude: region.longitude,
    });
  }}
>

下記のソースコードは、ユーザが地図の初期位置から他のところに移動させる時、当該位置を追跡（トラッキング）して地図のセンターへマーカーを表示する方法です。

import React, {useState} from 'react';
import Styled from 'styled-components/native';
import MapView, {Marker} from 'react-native-maps';

const Container = Styled.View`
    flex: 1;
`;

interface IGeolocation {
  latitude: number;
  longitude: number;
}

const TrackingMapWithMarker = () => {
  const [location, setLocation] = useState<IGeolocation>({
    latitude: 37.78825,
    longitude: -122.4324,
  });
  return (
    <Container>
      <MapView
        style={{flex: 1}}
        initialRegion={{
          latitude: location.latitude,
          longitude: location.longitude,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
        onRegionChange={region => {
          setLocation({
            latitude: region.latitude,
            longitude: region.longitude,
          });
        }}
        onRegionChangeComplete={region => {
          setLocation({
            latitude: region.latitude,
            longitude: region.longitude,
          });
        }}>
        <Marker
          coordinate={{
            latitude: location.latitude,
            longitude: location.longitude,
          }}
          title="this is a marker"
          description="this is a marker example"
        />
      </MapView>
    </Container>
  );
};

export default TrackingMapWithMarker;

ユーザーの現在位置を表示

ユーザの現在位置を表示するためには、ユーザの現在位置を取得する必要があります。ユーザの現在位置を取得する方法については下記のブログを参考してください。

• React Nativeで現在位置情報を取得する方法

このように取ってきたユーザデータを表示するため下記のソースコードを使います。

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const UserLocation = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({
          latitude,
          longitude,
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, []);
  return (
    <Container>
      {location && (
        <MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: location.latitude,
            longitude: location.longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          <Marker
            coordinate={{
              latitude: location.latitude,
              longitude: location.longitude,
            }}
          />
        </MapView>
      )}
    </Container>
  );
};

export default UserLocation;

結果画面は下記のようです。

ユーザの位置情報の追跡表示

位置情報ライブラリであるreact-native-geolocation-serviceを使うと、ユーザの位置情報を追跡することができます。react-native-geolocation-serviceライブラリに関しては下記のリンクを参考してください。

• React Nativeで現在位置情報を取得する方法

ユーザの位置情報を追跡してマーカー(Marker)を表示する例題は下記のようです。

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import MapView, {Marker} from 'react-native-maps';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const TrackUserLocation = () => {
  const [locations, setLocations] = useState<Array<ILocation>>([]);
  let _watchId: number;

  useEffect(() => {
    _watchId = Geolocation.watchPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocations([...locations, {latitude, longitude}]);
      },
      error => {
        console.log(error);
      },
      {
        enableHighAccuracy: true,
        distanceFilter: 100,
        interval: 5000,
        fastestInterval: 2000,
      },
    );
  }, [locations]);

  useEffect(() => {
    return () => {
      if (_watchId !== null) {
        Geolocation.clearWatch(_watchId);
      }
    };
  }, []);

  return (
    <Container>
      {locations.length > 0 && (
        <MapView
          style={{flex: 1}}
          initialRegion={{
            latitude: locations[0].latitude,
            longitude: locations[0].longitude,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          {locations.map((location: ILocation, index: number) => (
            <Marker
              key={`location-${index}`}
              coordinate={{
                latitude: location.latitude,
                longitude: location.longitude,
              }}
            />
          ))}
        </MapView>
      )}
    </Container>
  );
};

export default TrackUserLocation;

ユーザの位置追跡の結果画面は下記のようです。

その他の機能

地図の初期位置設定やマーカー(Marker)表示以外にも沢山の機能を提供しています。下記のリンクで公式サイトを参考してください。

• Rendering a Marker with a custom view
• Rendering a Marker with a custom image
• Rendering a custom Marker with a custom Callout
• Draggable Markers
• Using a custom Tile Overlay
• Overlaying other components on the map
• Customizing the map style
• Animated Region
• Animated Marker Position
• Take Snapshot of map
• Zoom to Specified Markers

完了

これでReact Nativeで地図を表示する方法についてみてみました。このライブラリを使うと地図の上にマーカーを表示するだけではなく、ポリゴン(Polygon)やポリライン(Polyline)も表示することができます。

地図を持ってるサービスを準備中である方はこのライブラリを使ってみることをおすすめします。

Github Sponsor Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

子供向け単語勉強アプリ

ブラブー

TOPIK試験向け単語アプリ

TOPIK単語1/2

TOPIK試験向け単語アプリ

TOPIK単語3/4

TOPIK試験向け単語アプリ

TOPIK単語5/6

韓国語単語アプリ

カンタン勉強

TOEIC試験向け単語アプリ

TOEIC英語単語帳

センター試験向け単語アプリ

センター英語単語