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, }, }); |