Home

Awesome

react-native-open-maps

build status coverage npm

🗺 A simple cross-platform library to help perform map actions to the corresponding device's map (Google, Apple, or Yandex Maps)

react-native-open-maps works by creating a universal map link for either Apple, Google, and Yandex maps that can be used to open up the relevant map application. In order to maximize compatibility some platform specific parameters are omitted, but simplifies development efforts and ensures a smooth user experience.

Features

New Demo Preview

Usage

  1. Install the repository
    $ npm install --save react-native-open-maps
    
  2. Add an import to the top of your file
    import openMap from 'react-native-open-maps';
    
  3. Put it all together
    import React, { Component } from 'react';
    import { Button } from 'react-native';
    import openMap from 'react-native-open-maps';
    
    export default class App extends Component {
      _goToYosemite() {
        openMap({ latitude: 37.865101, longitude: -119.538330 });
      }
    
      render() {
        return (
          <Button
            color={'#bdc3c7'}
            onPress={this._goToYosemite}
            title="Click To Open Maps 🗺" />
        );
      }
    }
    
  4. BONUS: You can also create delayed functions for more of that 1 - 1 mapping flavor 🍦.
import { createOpenLink } from 'react-native-open-maps';

const yosemite = { latitude: 37.865101, longitude: -119.538330 };
const openYosemite = createOpenLink(yosemite);
const openYosemiteZoomedOut = createOpenLink({ ...yosemite, zoom: 30 });

const facebookHQ = { latitude: 37.4847, longitude: 122.1477 };
const openFacebookHQ = createOpenLink(facebookHQ);

// Condensed for Readability...
    render() {
        return (
          <Button
            color={'#bdc3c7'}
            onPress={openYosemite}
            title="Go to Yosemite 🏔" />
          <Button
            color={'#bdc3c7'}
            onPress={openFacebookHQ}
            title="Go to Facebook HQ 🕋" />
        );

If you need additional examples, view the example directory for a demo you can run locally.

API

default function open(options)

react-native-open-maps immediately opens the map of the coordinates and the settings

{ createOpenLink(options) }

Creates a delayed invoked function to open the map. This is useful for binding functions to onPress() in a succinct manner. Think of it like ... function openToMe() { open(coordinates) }

{ createMapLink(options) }

Creates the raw link for the map.

{ createQueryParameters(options) }

Creates the query parameters for the designated maps provider. Useful if you want to override the base url and perform logic to override it with a native base URL.

options

PropertiesTypeDescriptionExampleMap Support
latitudenumberThe latitude37.865101All
longitudenumberThe longitude-119.538330All
zoomnumberThe zoom level, only works with latitude and longitude18 <br> Default: 15All
providerstring <br> [google,apple,yandex]If no provider set, it will determine according to Platform.OSappleN/A
querystringWill act according to the map used. Refer to query property"Yosemite Trail"All
queryPlaceIdstringWill query by Place ID.ChIJgUbEo8cfqokR5lP9_Wh_DaMGoogle
travelTypeenumeration : [drive, walk,public_transport]Use this parameter in conjunction with start and end to determine transportation type. Default is drive"drive"All
startstring that geolocation can understandThe start location that can be interpreted as a geolocation, omit if you want to use current location / "My Location". See Apple, Google and Yandex docs for more details on how to define geolocations."New York City, New York, NY"All
endstring that geolocation can understand.The end location that can be interpreted as a geolocation. See Apple, Google and Yandex docs for more details on how to define geolocations."SOHO, New York, NY"All
waypointsarray: [address, address]Define intermediate addresses between a route.["San Jose, California", "Campbell, California"]Apple (v16+) and Google
endPlaceIdstringEnd destination with the use of a place ID that uniquely identifies a places.ChIJgUbEo8cfqokR5lP9_Wh_DaMGoogle
navigatebooleanThis is only specific for Google. Yandex and Apple maps will provide directions if a start and end is provided.trueGoogle
mapTypeenum: [standard, satellite, hybrid, transit]Specifies base map type. Note, hybrid is the satellite map with a transit layer, where as transit is the standard roadmap with a transit layer."hybrid"All, except Yandex does not support "hybrid"

Note:

Map Actions

To perform certain map actions refer these necessary parameters

Examples

Search by query

createMapLink({ provider: 'apple', query: 'Yosemite National Park' });

Search query near coordinates (lat/lng)

createMapLink({ provider: 'apple', query: 'Coffee Shop', latitude: 10.02134, longitude: -29.21322 })

Get directions from start to end using addresses

createMapLink({ provider: 'yandex', start: '1 Infinite Loop, Cupertino, CA', end: '1600 Amphitheatre Pkwy, Mountain View, CA' })

Get directions from here

createMapLink({ provider: 'google', end: 'New York City, NY' })

Get directions from here with additional stops (Apple or Google only)

createMapLink({ provider: 'google', end: 'East Brunswick, NJ' })

Get directions by walking with a hybrid view (satellite and transit)

createMapLink({ provider: 'google', end: 'New York City, NY', travelType: 'walking', mapType: 'hybrid' })
Get public transit directions from start to end
createMapLink({ provider: 'google', start: 'SoHo, Manhattan, New York, NY', end: 'Times Square, Manhattan, NY', travelType: 'public_transportation' })
Display with different base map options
createMapLink({ provider: 'apple', query: 'hiking trails', mapType: 'satellite' })
Display centered around coordinates, really zoomed in
createMapLink({ provider: 'yandex', latitude: 10.02134, longitude: -29.21322, zoom: 20 })
Query Property

The query behavior differs per platform:

Contribute

Contributions are greatly appreciated! Prior to submitting PRs, please try to test your changes against the example application provided to make sure your changes do not break existing platforms. In addition, unit tests are recommended for new features or large changes.

Run Changes on Example App

To test your changes against the example application.

  1. npm run example-test
  2. cd example
  3. npx react-native start
  4. Run on your desired simulator

Your changes should not cause unexpected behaviors or warnings.

Run Test Suite

  1. npm test

License

MIT © Brandon Him

Shameless Plug 🔌

If you like this repository, check out my other react-native projects or follow me for other open-source projects: