How can I display a route map from my current location to a certain destination (a certain address)?

Lavalajo

In React Native, I'm developing a sample app using react-native-maps. It works fine, but I didn't find: How to display RouteMap from current location to another address or location?

Here 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 see some list of markers, but I don't need a roadmap of all markers...I just want some specific markers to be added to the current location.

Here I have attached the image I want:

enter image description here

Emmanuel Gusser

You need to query the following : ' https://maps.googleapis.com/maps/api/directions/ '

Basically, you have to give the coordinates of the start and end points. Details : https://developers.google.com/maps/documentation/directions/start _

You should parse the answer like 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 feature is taken from https://github.com/airbnb/react-native-maps/issues/929

The response, which I store in the 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 your status, your route is automatically updated.

Related

How can I show my current location in Xcode's map?

Eric Levine I watched some courses on YouTube and am now trying to get hands-on experience. I'm pursuing a small project involving a tabbed app and on the first page I'm trying to create a map with a button that shows the current location. It's actually pretty

How can I show my current location in Xcode's map?

Eric Levine I watched some courses on YouTube and am now trying to get hands-on experience. I'm pursuing a small project involving a tabbed app, and on the first page I'm trying to create a map with a button that shows the current location. It's actually prett

How can I show my current location in Xcode's map?

Eric Levine I watched some courses on YouTube and am now trying to get hands-on experience. I'm pursuing a small project involving a tabbed app and on the first page I'm trying to create a map with a button that shows the current location. It's actually pretty

How can I show my current location in Xcode's map?

Eric Levine I watched some courses on YouTube and am now trying to get hands-on experience. I'm pursuing a small project involving a tabbed app, and on the first page I'm trying to create a map with a button that shows the current location. It's actually prett

How can I check for an object at a certain location?

pepper dog I have a black targetBox that checks if there is a Block object in the area it covers, such as the gray object in the upper left corner, and returns a boolean if there is a Block at that location. It's a tile system and I've included a case that wil

How can I make the map view get from the current location?

Liu Wenjun As the title, how can I make the map view zoom to the current location? By the way, I can get the current Log and Lon in getLocation(). Just don't know how to implement it into the map. Thanks in advance to anyone who can help me.. I am new to andro

How can I stop my function from executing at a certain line?

Adam Ritchie I wrote this using a simple vending machine and this code is to count change under $1. The only problem I'm facing is: if the second if statement in the void function is true, I want my function to stop executing the rest of the function. So, what

How can I remove certain results from my search count?

Kefir Moskovitz I'm getting some results that are not relevant to my count and I want to remove them from my output. When using only the first "wherelower (person) not like '%c%'", but when adding person b, c, etc, as shown, it gives me the original uncorrelat

How can I stop my function from executing at a certain line?

Adam Ritchie I wrote this using a simple vending machine and this code is to count change under $1. The only problem I'm facing is: if the second if statement in the void function is true, I want my function to stop executing the rest of the function. So, what