react native google maps android ve iosda çalıştırma

ilk önce bir key alacaksınız google map android sdk ve ios sdk etkinleştirerek.

sonra AndroidManifest.xml dosyamıza

üst tarafa bu izinleri ekle.

1
2
<uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

yine aynı dosyada alt taraflarda application içine;

1
2
3
4
<meta-data
          android:name="com.google.android.geo.API_KEY"
          android:value="AIzaSyA2lytwbh-gqmVYQFzxELeijogKAKYYJdI" />
      <uses-library android:name="org.apache.http.legacy" android:required="false" />

ios google maps çalıştırmak için ayarlar

ios->ProjeAdı->AppDelegate.m dosyasında “@implementation AppDelegate” üstüne

1
#import <GoogleMaps/GoogleMaps.h>

ekliyoruz. yine aynı dosyada “”- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions”” yazan başlangıç kısmının bitişinden hemen önce return yes var. onun üstüne;

1
[GMSServices provideAPIKey:@"APIKEY"];

ios->Podfile dosyasını açıyoruz. ilk “Target xx Do” altına hemen;

1
2
  rn_path = '../node_modules/react-native'
  rn_maps_path = '../node_modules/react-native-maps'

bu target bitmeden hemen önce

1
2
3
4
pod 'react-native-maps', path: rn_maps_path
  pod 'react-native-google-maps', path: rn_maps_path
  pod 'GoogleMaps'
  pod 'Google-Maps-iOS-Utils'

bak buradan bakabilirsiniz.
https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md

örnek app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
    TouchableOpacity,
    PermissionsAndroid,
    Platform
} from 'react-native';
 
import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
import NativePermissionsAndroid from "react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid";
export default class App extends React.Component{
  constructor() {
    super();
    this.state = {
      latitude:'',
      longitude:''
    }
  }
 
  componentDidMount = async () =>{
 
    if(Platform.OS == 'android'){
      const response = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
         'title':'MapsAndGeo',
         'message':"Konumunuzu istiyoruzzz"
      })
 
    }else{
      Geolocation.requestAuthorization();
    }
 
    
 
  render(){
    return <SafeAreaView>
      <View style={styles.container}>
 
        <MapView
            provider={PROVIDER_GOOGLE}
            style={styles.map}
            region={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.015,
              longitudeDelta: 0.0121,
            }}
        >
        </MapView>
      </View>
    </SafeAreaView>
  }
}
 
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    height: 400,
    width: 400,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  map: {
    ...StyleSheet.absoluteFillObject,
  },
});

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.