react-native-maps demo

for project setup

npm install

#####  run ios emulator

npm run ios 

#### run andriod emulator

npm run android

prepare for link map

1. import MapView from 'react-native-maps'

2. rnpm link (needs for npm i -g rnpm) or react-native link

3. for android use

    3.1 apply for Android key - 
    
            get API_KEY from https://developers.google.com/maps/documentation/android-api/signup

    3.2 Added API Key in android/app/src/main/AndroidManifest.xml

            <meta-data
              android:name="com.google.android.geo.API_KEY"
              android:value="your-api-key"/>

    3.3 android/app/src/main/java/com/thirtydaysofreactnative/MainApplication.
    
            import com.airbnb.android.react.maps.MapsPackage;

            @Override
            protected List<ReactPackage> getPackages() {
              return Arrays.<ReactPackage>asList(
                  new MapsPackage(),
                  new MainReactPackage()
              );
            }

MainView

DisplayLatLng

show as simple region for location

ViewsAsMarkers

use custom-markers at maps

EventListener

1. show for mapView event-triggers

2. Marker

3. Polygon

4. Polyline

* modify path for SyntheticEvent (react-native/Libraries/Renderer/src/renderers/shared/shared/event/SyntheticEvent)

MarkerTypes

use img to create Marker,and add 'onPress' event

DraggableMarkers

marker event-triggers

PolygonCreator

create and draw region of Polygon

PolylineCreator

create and draw region of Polyline

AnimatedViews

MapView.Animated applied

AnimatedMarkers

Markers Animated

*correct the issues : import { Animated } from 'react-native' replaced by import MapView, { AnimatedRegion } from 'react-native-maps'; 

Callouts

event triggers show info-window of mapView

Overlays

show how to use  Circle,Polygon,Polyine of MapView

DefaultMarkers

use default markers(random color used)

CustomMarkers

use custom markers to show

CachedMap

use ListView match with MapView cacheEnabled

LoadingMap

As Loading effect when MapView prepare

TakeSnapshot

Take a snap to be image resource

FitToSuppliedMarkers

Animated to show Fit effect for markers

FitToCoordinates

Fit markers selected in mapView

LiteMapView

Lite Maps list

CustomTiles

to be updating..

ZIndexMarkers

marker zIndex used

StaticMap

static map at scrollView

MapStyle

custom mapStyle used

LegalLabel

legal animated

SetNativePropsOverlays

use ref by mapView object (circle,polygon,polyline) to set nativeProp

CustomOverlay

custom overlay setting

BugMarkerWontUpdate

navigator watch && rotate marker demo

refs by

1. https://github.com/airbnb/react-native-maps/tree/master/example

2. https://github.com/mshameer/react-native-maps-sample