How can I show a route map from the current location to some destination (some address) location?

Question

In React Native I am developing a sample application using react-native-maps. It's working fine, but I didn't find out: How can I show RouteMap from the current location to another address or Location?

Here this is my code:

<MapView
    ref='map'
    style={styles.map}
    region={this.state.mapRegion}
    showsUserLocation={true}
    followUserLocation={true}
    zoomEnabled={true}
    pitchEnabled={true}
    showsCompass={true}
    showsBuildings={true}
    showsTraffic={true}
    showsIndoors={true}
    onRegionChange={this.onRegionChange.bind(this)}
    onPress={this.onMapPress.bind(this)}
>
    {this.state.markers.map(marker => (
        <MapView.Marker
                coordinate={{
                  latitude:  marker.Latitude  || this.state.lastLat  || region.latitude,
                  longitude: marker.Longitude || this.state.lastLong || region.longitude
                }}
                image = {
                 marker.EmergencyService == true ?(
                   require('./Imgs/emergencyService.png')):
                   (require('./Imgs/regularService.png'))
                }
                onCalloutPress={() => this.bookDoctorsAppointment(marker)}
        >                
            <MyCustomMarkerView marker={marker}  navigator={this.props.navigator}/>
        </MapView.Marker>
    ))}
</MapView>

Actually in this code I am showed some list of markers, but I don't need the all markers route map... I want only some of the particular markers to the current location.

Here I attached the image I want like this:

Botanize

Answer 1

You need to make a query to: 'https://maps.googleapis.com/maps/api/directions/'

Basically, you have to give origin and destination coordinates. More information: https://developers.google.com/maps/documentation/directions/start

You should parse the answer with this:

export function decode (t, e) {
    for (var n, o, u = 0, l = 0, r = 0, d = [], h = 0, i = 0,
         a = null, c = Math.pow(10, e || 5) ; 
         u < t.length 
         ;
        ) {

        a = null, h = 0, i = 0

        do
            a = t.charCodeAt(u++) - 63, i |= (31 & a) << h, h += 5;
        while (a >= 32)

        n = 1 & i ? ~(i >> 1) : i >> 1, h = i = 0

        do
            a = t.charCodeAt(u++) - 63, i |= (31 & a) << h, h += 5;
        while (a >= 32)

        o = 1 & i ? ~(i >> 1) : i >> 1, l += n, r += o,
            d.push([l / c, r / c])
    }
    return d.map(
               function (t) {
                   return {latitude: t[0], longitude: t[1]}
               })
}

// This function was selected from https://github.com/airbnb/react-native-maps/issues/929

The response, I store on state:

that.setState({
    route: [decode(res)]
})

renderRoute (coordinates, i) {
    return (
        <MapView.Polyline
          key={i}
          coordinates={coordinates}
          strokeColor={......}
          strokeWidth={4}
        />
    );
}

render () {

    return (
        <MapView
            showsUserLocation
            followsUserLocation
            loadingEnabled
        >
            {this.state.route.map(this.renderRoute)}
        </MapView>

So every time you update the status this will automatically update your route.

Septicemia