Route direction is not showing

[grwimran]

trafficstars

Route Direction not Showing.Please advise.

    <MapView
    style={styles.map}
    provider={PROVIDER_GOOGLE} 
    initialRegion={{
          latitude: this.state.latitude,
          longitude: this.state.longitude,
          latitudeDelta: 3.0,
          longitudeDelta: 3.0,
          
        }}
     //  onRegionChange={this.onRegionChange.bind(this)}
         showsUserLocation={true}
         followUserLocation={true}
         zoomEnabled={true}
      

    >
        <MapView.Marker
     
          coordinate={{latitude:this.state.latitude,longitude:this.state.longitude}}
          title={this.state.title}
        
        />

<MapView.Marker

          coordinate={{latitude:this.state.clat,longitude:this.state.clong}}
         
        
        />
      
      <MapViewDirections
origin={{latitude:this.state.clat,longitude:this.state.clong}}
destination={{latitude:this.state.latitude,longitude:this.state.longitude}}
apikey={Common.GOOGLE_MAPS_APIKEY}
strokeWidth={3}
mode='DRIVING'
language='en'


strokeColor="#2686c5"
onStart={(params) => {
  console.log('Start');
}}
onReady={result => {
  console.log('Distance: ${result.distance} km')
  console.log('Duration: ${result.duration} min.')

}}

onError={(errorMessage) => {
  alert(errorMessage);
  // console.log('GOT AN ERROR');
}}

/>

      </MapView>

[micabe]

same here

[Nsengiyunva]

facing this same issue. Actually my app keeps crashing.

[FredericoVieira]

I'm having the same issue when two points (origin and destination) are set. Using MapView.Polyline works fine, but with MapViewDirections i got this error: react-native-maps-directions Error on GMAPS route request TypeError: Network request failed

[bramus]

@grwimran What error does it show? Please check the console.

@FredericoVieira Looks like you're having network issues, as your error reads Network request failed. This is not a react-native-maps-directions-specific problem. This StackOverflow Issue might help you.

[FredericoVieira]

@bramus thanks for quick response. In my case, this configuration to check network requests in Chrome DevTool was causing the issue

if (__DEV__) {
  XMLHttpRequest = GLOBAL.originalXMLHttpRequest
  ? GLOBAL.originalXMLHttpRequest
  : GLOBAL.XMLHttpRequest;
}

[sivierostein]

Same here. I can´t catch an error message... I am receiving the coordinates, the correct distance, the duration, but the "path line" is not showing in the MapView object on screen. I am new in RN development... I don´t know how to debug what is hapening...

[Hiti3]

Having same issue only in standalone app, using expo as managed workstation. It works fine inside expo published app, but on standalone app I do not get calculated estimations, nor the polyline drawn, can anyone please advise asap?? Works perfectly in testing, deploy a build and it stops working.....

[Hiti3]

Is there some kind of setup needed I mean I am shocked by all this how functionality starts to deteriorate when one deploys a standalone build vs examples/demos/local stuff works..

[Hiti3]

Is there any config needed to add to the app.json file like for google maps view?

"config": { "googleMaps": { "apiKey": "api_key" } },

[webraptor]

Placing the api key at JS level for a native app would not be okay, because you could not restrict the usage. Anyone could hijack it and use it and you'd wind up paying the bill. The calls to Google should be at native level so that they can be restricted based on the app's packaging...

[Hiti3]

Placing the api key at JS level for a native app would not be okay, because you could not restrict the usage. Anyone could hijack it and use it and you'd wind up paying the bill. The calls to Google should be at native level so that they can be restricted based on the app's packaging...

Where is the proposed solution? What we see is only what we can not do and even that is untrue. The issue at least with me was I was trying to restrict directions api to android app whi h is false because it goes through a server intermediary which can also be restricted if wished obviously.