🗺 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

• ✅ Open the map coordinates immediately
• ✅ Create a delayed invoked function that will open the map
• ✅ Create a string of the map link
• ✅ Cross-compatible properties among different map applications

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.

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

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

Creates the raw link for the map.

Note:

• Combining query with latitude and longitude will override the query parameter.
• Yandex Maps does not support building routes from current location.

To perform certain map actions refer these necessary parameters

• Setting Directions: end, [ start , travelType ]
• Display Map Around Coordinates: latitude + longitude, [ zoom ]
• Query Map For Location: query

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

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

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

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

createMapLink({ provider: 'google', end: 'New York City, NY', travelType: 'walking', mapType: 'hybrid' })

createMapLink({ provider: 'google', start: 'SoHo, Manhattan, New York, NY', end: 'Times Square, Manhattan, NY', travelType: 'public_transportation' })

createMapLink({ provider: 'apple', query: 'hiking trails', mapType: 'satellite' })

createMapLink({ provider: 'yandex', latitude: 10.02134, longitude: -29.21322, zoom: 20 })

The query behavior differs per platform:

• Apple Maps: If latitude and longitude is provided, this will place a marker with the query as a label. If no latitude or longitude is provided, it will center map to closest query match.
• Google Maps: Will override latitude and longitude if present and center map to closest query match. Without a query, you may however use <latitude>,<longitude> as a string value in the query to have a unnamed marker on the map.
• Yandex Maps: If latitude and longitude is provided, this will place a point to show the accurate location. If no latitude or longitude is provided, it will center map to closest query match.

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.

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.

1. npm test

MIT © Brandon Him

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

• react-native-masonry: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions.
• react-native-hero: A super duper easy hero unit react-native component with support for dynamic image, dynamic sizing, color overlays, and more
• rn-component-cookbook: A open-source cookbook with recipes for handling everyday issues when building robust, modular react-native components
• generator-rnc: A yeoman generator to scaffold a ready-to-go, open-source react-native component (Jest, Package dependencies, Travis, etc)