CODEWITHSUNDEEP
react-native
invariant
invariant

Reputation: 8900

Get Directions API call ? react-native

In many iOS apps I can see a button saying getDirections, which will upon click open an Apple/Google maps with latitude and longitude passed as destination.

I have my TouchableHighlight button with lat and lng ready. What API endpoint do I need to call in onPress callback to open Apple maps with my coordinates as route destination?

Upvotes: 12

Views: 7286

Answers (3)

Jean-Claude YALAP
Jean-Claude YALAP

Reputation: 255

To link to another application, and open itinerary as Maps, use this function:

export function openDirections(latitude, longitude) {
    Platform.select({
        ios: () => {
            Linking.openURL('http://maps.apple.com/maps?daddr=' + latitude + ',' + longitude);
        },
        android: () => {
            Linking.openURL('http://maps.google.com/maps?daddr=' + latitude + ',' + longitude);
        }
    })();
}

Upvotes: 7

Colin Ramsay
Colin Ramsay

Reputation: 16477

To link to another application, such as Maps, use LinkingIOS:

https://facebook.github.io/react-native/docs/linkingios.html

// Replace lat and long with your own decimal latitude and longitude values
var url = 'http://maps.apple.com/?ll=<lat>,<long>';
LinkingIOS.openURL(url);

For maps the URL scheme is just the same as from a standard Obj-C app:

https://developer.apple.com/library/ios/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html

Upvotes: 14

Colin Ramsay
Colin Ramsay

Reputation: 16477

You can use the Geolocation API:

// Get position once
navigator.geolocation.getCurrentPosition(
    (initialPosition) => this.setState({initialPosition}), // success callback
    (error) => alert(error.message), // failure callback
    {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000} // options
);

// Repeatedly track position
this.watchID = navigator.geolocation.watchPosition((lastPosition) => {
  this.setState({lastPosition});
});

You can then use the position and display it however you want, perhaps in a MapView.

Upvotes: -3

Related Questions