Neti Pot Manufacturer

    react-native-gmaps

    1.0.9 • Public • Published

    React Native (Android) Google Maps

    A (currently) very lightweight implementation of Google Maps for Android.

    Example Map

    Your build your map with the following properties; they are all optional (it will default to simply zooming in on london without any props) apart from you must define a style with 'height' and 'width'.

    let RNGMap = require('react-native-gmaps');
     
    ...
     
    <RNGMap
      ref={'gmap'}
      style={ { height: 500, width: 500 } }
      markers={ [
            { coordinates: {lng: 0.1, lat: 51.0} },
            { 
              coordinates: {lng: -0.1, lat: 51.0}, 
              title: "Click marker to see this title!",
              snippet: "Subtitle",
              id: 0,
              /*
               * Able to use "my_icon" or {uri: 'my_icon', width: 100, height: 100 } here as well
               */
              icon: require('image!my_icon'), // <-- android/app/src/main/res/drawable/my_icon.png
              /*
               * color is only working with default icon
               */
              color: 120,
            }
        ] }
      zoomLevel={10}
      onMapChange={(e) => console.log(e)}
      onMapError={(e) => console.log('Map error --> ', e)}
      center={ { lng: 0.1, lat: 51.0 } } 
      /*
       * clickMarker shows Info Window of Marker with id: 0,
       * hides Info Window if given null
       */
      clickMarker={0}/>
    onMapChange

    You will notice that you can pass a function to 'onMapChange'; this will be called after every time the map move - including when it initialises and zooms to it's initial point.

    onMapError

    Pass in a function to onMapError to respond to any errors thrown by gmaps. The only errors currently passed back are:

    • Map is null - { message: 'Map is null', type: 'map_null' }

      • You will get this error if you dont have Google Play APK installed.
    • Map init error - { message: 'Map initialize error', 'map_init_error' }

      • If an initialization error is caught then this will be passed.

    Methods

    • zoomOnMarkers - Call this to zoom the map in on any markers you may have added.

    API

    Polyline

    
    var Polyline = require('react-native-gmaps/Polyline');
    
    Polyline.create({
      color: '#0000cc',
      width: 15,
      geodesic: true,
      visible: true,
      points: [
        [51.5, -0.1], [40.7, -74.0]
      ]
    }, function(polyline) {
      polyline.addPoint(45.5192919, -73.6169509, function(success) {
        console.log("- addPoint success");
      });
    
      polyline.setState({
        color: '#ff0000',
        width: 20
      }, function(success) {
        console.log('- setState success');
      });
    
      // Remove it
      polyline.remove();
    
    })
    

    Install

    Step 1 - Install Google Play APK

    Check here && here for guidance.

    Step 2 - Install the npm package

    $ npm install react-native-gmaps --save

    Step 3 - Update Gradle Settings

    // file: android/settings.gradle
    ...
     
    include ':react-native-gmaps', ':app'
    project(':react-native-gmaps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gmaps/android/app')

    Step 4 - Update app Gradle Build

    // file: android/app/build.gradle
    ...
     
    dependencies {
        ...
        compile project(':react-native-gmaps')
    }

    Step 5 - Register React Package

    ...
    import com.rota.rngmaps.RNGMapsPackage; // <-- import 
     
    public class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler {
     
        private ReactInstanceManager mReactInstanceManager;
        private ReactRootView mReactRootView;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            mReactRootView = new ReactRootView(this);
            mReactInstanceManager = ReactInstanceManager.builder()
                    .setApplication(getApplication())
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModuleName("index.android")
                    .addPackage(new MainReactPackage())
                    .addPackage(new RNGMapsPackage()) // <-- Register package here 
                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .build();
            mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
            setContentView(mReactRootView);
        }
    ...
     

    Step 6 - Add Google Maps to your Project

    Add this to your AndroidManifest file; make sure it goes at the bottom of the <application> tag.

    More info on API Keys can be found here

    // file: android/app/src/main/AndroidManifest.xml
    <uses-library android:name="com.google.android.maps" />
    <meta-data
        android:name="com.google.android.geo.API_KEY"
        android:value="YOUR_API_KEY"/>

    ... That should do it! Please let me know of any issues ...

    Install

    npm i react-native-gmaps

    DownloadsWeekly Downloads

    2

    Version

    1.0.9

    License

    ISC

    Last publish

    Collaborators

    • kirkness