【React Native】Googleマップアプリを開く

今回は React Native アプリから Google マップもしくは iOS のマップアプリを開く方法についてです。
参考にさせていただいた記事はこちらから。

open maps/google maps in react native – Stack Overflow
https://stackoverflow.com/questions/43214062/open-maps-google-maps-in-react-native

 

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

const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
const latLng = `${[緯度]},${[経度]}`;
const label = '[ラベル名]';
const url = Platform.select({
    ios: `${scheme}${label}@${latLng}`,
    android: `${scheme}${latLng}(${label})`
});
Linking.openURL(url);

2行目、3行目で開きたい場所の緯度経度と地点名のラベルを追加します。
あとは、Linking を使ってリンクを開けばOKです。
まだ Android のみしか動作確認していないのですが、意図した通りに動作しました!
後日 iOS での挙動も確認します。

 

以上、React Native アプリから Goole マップなどのマップアプリを開く方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG