react-native-maps/docs/installation.md

React Native Mapview component for iOS + Android

# Installation

First, download the library from npm:

```
npm install react-native-maps --save
```

Then you must install the native dependencies: You can use `rnpm` (now part of `react-native` core) to
add native dependencies automatically then continue the directions below depending on your target OS.

   `$ react-native link`

   >This installation should work in physical devices. For Genymotion, be sure to check Android installation about Google Play Services

## iOS

### Option 1: CocoaPods - Same as the included AirMapsExplorer example

1. Setup your `Podfile` like the included [example/ios/Podfile](../example/ios/Podfile)  then run `pod install`.
   (If you do not need `GoogleMaps` support for iOS, then you can probably completely skip this step.)
1. Open your project in Xcode workspace
1. Drag the following folder into your project:
    - `node_modules/react-native-maps/ios/AirMaps/`
1. If you need `GoogleMaps` support also drag this folder into your project:
    - `node_modules/react-native-maps/ios/AirGoogleMaps/`

### Option 2: CocoaPods -- Untested Way
NOTE: If you actually get this to work, please open an issue to let us know.
This is now considered the **old way** because it is untested and if it does work at all, it
will only work if you **don't** have `use_frameworks!` in your `Podfile`

To install using Cocoapods, simply insert the following line into your `Podfile`:

    pod 'react-native-maps', :path => '../node_modules/react-native-maps'

If you need `GoogleMaps` support in iOS also add this line:

    pod 'react-native-google-maps', :path => '../node_modules/react-native-maps'

Now if you need `GoogleMaps` support you will also have to add a bunch of other stuff to your
`Podfile`. See the **comments* in the included [example/ios/Podfile](../example/ios/Podfile) which explain the rest.

After your `Podfile` is setup properly, run `pod install`.

### Option 3: Manually
1. Open your project in Xcode, right click on `Libraries` and click `Add
   Files to "Your Project Name"` Look under `node_modules/react-native-maps/ios` and add `AIRMaps.xcodeproj`.
1. Add `libAIRMaps.a` to `Build Phases -> Link Binary With Libraries.
1. Click on `AIRMaps.xcodeproj` in `Libraries` and go the `Build
   Settings` tab. Double click the text to the right of `Header Search
   Paths` and verify that it has `$(SRCROOT)/../../react-native/React` as well as `$(SRCROOT)/../../react-native/Libraries/Image` - if they
   aren't, then add them. This is so Xcode is able to find the headers that
   the `AIRMaps` source files are referring to by pointing to the
   header files installed within the `react-native` `node_modules`
   directory.
1. Whenever you want to use it within React code now you can: `var MapView =
   require('react-native-maps');`

## Android

1. In your `android/app/build.gradle` add:
   ```groovy
   ...
   dependencies {
     ...
     compile project(':react-native-maps')
   }
   ```

1. In your `android/settings.gradle` add:
   ```groovy
   ...
   include ':react-native-maps'
   project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/android')
   ```

1. Specify your Google Maps API Key:
    > For development, it is recommended to use a ***Browser Key*** without referrer restrictions. Go to https://console.developers.google.com/apis/credentials to check your credentials.

   Add your **Browser** API key to your manifest file (`android\app\src\main\AndroidManifest.xml`):

   ```xml
   <application>
       <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
       <meta-data
         android:name="com.google.android.geo.API_KEY"
         android:value="Your Google maps API Key Here"/>
   </application>
   ```
    > If that doesn't work, try using an ***Android Key*** without referrer restrictions. Go to https://console.developers.google.com/apis/credentials to check your credentials.

   Add your **Android** API key to your manifest file:

   ```xml
   <application>
       <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
       <meta-data
           android:name="com.google.android.maps.v2.API_KEY"
           android:value="{{@string/ANDROID_GOOGLE_MAPS_API_KEY}}"/>
   </application>
   ```
   > Note: As shown above, com.google.android.geo.API_KEY is the recommended metadata name for the API key. A key with this name can be used to authenticate to multiple Google Maps-based APIs on the Android platform, including the Google Maps Android API. For backwards compatibility, the API also supports the name com.google.android.maps.v2.API_KEY. This legacy name allows authentication to the Android Maps API v2 only. An application can specify only one of the API key metadata names. If both are specified, the API throws an exception.
Source: https://developers.google.com/maps/documentation/android-api/signup

1. Ensure that you have Google Play Services installed:
  * For Genymotion you can follow [these instructions](http://stackoverflow.com/a/20137324/1424349).
  * For a physical device you need to search on Google for 'Google Play Services'. There will be a link that takes you to the Play Store and from there you will see a button to update it (do not search within the Play Store).

## Troubleshooting

If you have a blank map issue, ([#118](https://github.com/airbnb/react-native-maps/issues/118), [#176](https://github.com/airbnb/react-native-maps/issues/176), [#684](https://github.com/airbnb/react-native-maps/issues/684)), try the following lines :

### On iOS:

You have to link dependencies with rnpm and re-run the build:

1. `rnpm link`
1. `react-native run-ios`

### On Android:

1. Be sure to have `new MapsPackage()` in your `MainApplication.java` :
   ```
   import com.airbnb.android.react.maps.MapsPackage;
   ...
   @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new MapsPackage()
            );
        }
   ```

1. Set this Stylesheet in your map component
   ```
   ...
   const styles = StyleSheet.create({
     container: {
       ...StyleSheet.absoluteFillObject,
       height: 400,
       width: 400,
       justifyContent: 'flex-end',
       alignItems: 'center',
     },
     map: {
       ...StyleSheet.absoluteFillObject,
     },
   });

   module.exports = class MyApp extends React.Component {
     render() {
       const { region } = this.props;
       console.log(region);

       return (
         <View style ={styles.container}>
           <MapView
             style={styles.map}
             region={{
               latitude: 37.78825,
               longitude: -122.4324,
               latitudeDelta: 0.015,
               longitudeDelta: 0.0121,
             }}
           >
           </MapView>
         </View>
       );
     }
   }
   ```
1. Run "android" and make sure every packages is updated.
1.  If not installed yet, you have to install the following packages :
    - Extras / Google Play services
    - Extras / Google Repository
    - Android 6.0 (API 23) / Google APIs Intel x86 Atom System Image Rev. 13
1. Check manual installation steps
1. Generate your SHA1 key :  
   `keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android`

1. Go to [Google API Console](https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend) and select your project, or create one.  
In `Overview -> Google Maps API -> Google Maps Android API ` -> Check if it's enabled  
Create a new key by clicking on `Create credentials -> API Key -> Android Key`, enter the name of the API key and your SHA1 key, generated before, and create it.
Check installation step 4.

1. Clean the cache :   
   `watchman watch-del-all`  
   `npm cache clean`

1. When starting emulator, make sure you have enabled `Wipe user data`.

1. Run `react-native run-android`

1. At this step it should work, but if not, go to your [Google API Console](https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend&keyType=CLIENT_SIDE_ANDROID&pli=1) and create a `Browser key` instead of a `Android key` and go to step 6.