getting error "react-native-maps-directions Error on GMAPS route request Unknown error." establishing connection of to coordinates - react-native

I am trying to establish a line between two locations in google maps using react-native. But I am getting
Error :
react-native-maps-directions Error on GMAPS route request Unknown
error.
React-native code :
import React , { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
const GOOGLE_MAPS_APIKEY = "...";
const origin = {latitude: 15.846812, longitude: 80.891340, latitudeDelta: 0.0622, longitudeDelta: 0.0421};
const destination = {latitude: 15.750875, longitude: 81.018389, latitudeDelta: 0.0622, longitudeDelta: 0.0421};
class RNMapsDirectionsExample extends Component{
render(){
return(
console.log('orgin' ,{origin}),
console.log('destination', {destination}),
<MapView initialRegion={
{
latitude: 15.846812,
longitude: 80.891340,
latitudeDelta: 0.0622,
longitudeDelta: 0.0421}
}>
<MapViewDirections
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
/>
</MapView>
);
}
}
const styles = StyleSheet.create({
mapContainer: {
width: "100%",
height: 200,
marginTop: 20,
flex:1
},
map: {
width: "100%",
height: "100%",
flex:1
}
});
export default RNMapsDirectionsExample;

Yup found the solution, u guys might be using coordinates for the places where there is no land route.
Like India to Australia.
And please set stroke width and color.

Related

direction routes in react native not shown

first i use react-native-maps to locate the expo app in toronto,and i use react-native-maps-directions to draw route between two location in toronto.MapView component works,but its child component MapViewDirections not working.no error notification.
"react-native-maps": "0.30.2",
"react-native-maps-directions": "1.8.0"
code like below:
import * as React from 'react';
import MapView from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import MapViewDirections from 'react-native-maps-directions';
const LATITUDE = 43.653225;
const LONGITUDE = -79.383186;
export default function App() {
const origin = {latitude: 43.791680, longitude: -79.312770};
const destination = {latitude: 43.785230, longitude: -79.293420};
const GOOGLE_MAPS_APIKEY = 'myapikey';
return (
<View style={styles.container}>
<MapView provider="google"
initialRegion={{
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
style={styles.map} >
<MapViewDirections
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
onError={(errorMessage) => {
console.log('GOT AN ERROR');
}}
/>
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
})
Finally,I found the solution after I check MapViewDirections's source code .MapViewDirections component has very special logic while using,this component constructed with react-native-maps,so it should be work with MapView.And secondly,its state should be shown after re-render,I use usestate to make its state rendered.I paste code here:
import * as React from 'react';
import MapView, { Marker } from 'react-native-maps';
import { StyleSheet, Text, View, Dimensions } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import MapViewDirections from 'react-native-maps-directions';
import { useState } from 'react';
const LATITUDE = 43.653225;
const LONGITUDE = -79.383186;
export default function App() {
const [coordinates] = useState([
{
latitude: 43.791680, longitude: -79.312770,
},
{
latitude: 43.785230, longitude: -79.293420,
},
]);
const origin = {latitude: 43.791680, longitude: -79.312770};
const destination = {latitude: 43.785230, longitude: -79.293420};
const GOOGLE_MAPS_APIKEY = 'AIzaSyBpAexI1D_HPIrR9xz_RqAAKDNlYKmW0Q8';
return (
<View style={styles.container}>
<MapView
style={styles.maps}
initialRegion={{
latitude: coordinates[0].latitude,
longitude: coordinates[0].longitude,
latitudeDelta: 0.0622,
longitudeDelta: 0.0121,
}}>
<MapViewDirections
origin={coordinates[0]}
destination={coordinates[1]}
apikey={GOOGLE_MAPS_APIKEY} // insert your API Key here
strokeWidth={4}
strokeColor="#111111"
/>
<Marker coordinate={coordinates[0]} />
<Marker coordinate={coordinates[1]} />
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
maps: {
width: Dimensions.get('screen').width,
height: Dimensions.get('screen').height,
},
})

Marker position not updating correctly (only when provider is google)

I am using React Native Maps, which shows the selected location with a marker. When the user selects a new location, the marker is not updating to the new position. This only happens when the "provider is google". When I try using apple maps, the marker updates to the correct position.
below is my code
import React from "react";
import { StyleSheet, View } from "react-native";
import MapView, { Marker } from "react-native-maps";
const _renderMarker = (location) => {
return location.map(({ lat, lng, index }) => {
return (
<Marker
key={index}
coordinate={{
latitude: lat,
longitude: lng,
}}
></Marker>
);
});
};
const Map = (props) => {
return (
<View style={styles.searchboxcontainer}>
<MapView
style={styles.map}
region={{
latitude: props.mdata.lat,
longitude: props.mdata.lng,
latitudeDelta: props.mdata.latDelta, // 0.00822,
longitudeDelta: props.mdata.lngDelta, // 0.04421,
}}
provider={"google"} //works when using apple maps
>
{_renderMarker([{ lat: props.mdata.lat, lng: props.mdata.lng }])}
</MapView>
</View>
);
};
const styles = StyleSheet.create({
mapboxcontainer: {
width: "100%",
height: "100%",
},
map: {
width: "100%",
height: "100%",
},
});
export default Map;

MapViewDirections Error: Error on GMAPS route request: TypeError: Network request failed

MapViewDirections Error: Error on GMAPS route request: TypeError: Network request failed keeps coming up every time I try running the app. I need to show a line between 2 points. What could be the problem with this code.
import React, { Component } from 'react'
import { Dimensions, StyleSheet } from 'react-native'
import MapView from 'react-native-maps'
import MapViewDirections from 'react-native-maps-directions'
const GOOGLE_MAPS_APIKEY = '...'
const origin = {
latitude: 15.846812,
longitude: 80.89134,
latitudeDelta: 0.0622,
longitudeDelta: 0.0421,
}
const destination = {
latitude: 15.750875,
longitude: 81.018389,
latitudeDelta: 0.0622,
longitudeDelta: 0.0421,
}
class MapSample extends Component {
render() {
return (
console.log('orgin', { origin }),
console.log('destination', { destination }),
(
<MapView
initialRegion={{
latitude: 15.846812,
longitude: 81.018389,
latitudeDelta: 0.0622,
longitudeDelta: 0.0421,
}}
>
<MapViewDirections
origin={origin}
destination={destination}
apikey={GOOGLE_MAPS_APIKEY}
/>
</MapView>
)
)
}
}
const styles = StyleSheet.create({
mapContainer: {
width: '100%',
height: 200,
marginTop: 20,
flex: 1,
},
map: {
width: '100%',
height: '100%',
flex: 1,
},
})
export default MapSample
I created an API key successfully, I do not know why this error message keeps coming.
I had the same problem while programming on a React Native project at work.
The solution for me was to remove any restrictions on the network that I was working on.
Maybe your firewall is restricting you at some point which throws you that error. You could try disabling it.
I managed to fix this error. The problem was, I had not enable billing on my google account. So activating billing makes it work ok.

How do i get location of user before API calls?

an app I am trying to make involves a portion where nearby markers are fetched from my server.
I am sure that my location hook function works, however, it is not finishing before my API call is made to get markers near that location.
This has confused me for hours, so any help would be greatly appreciated!
import React, { useEffect, useState } from "react";
import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
import { StyleSheet, View, Dimensions, Platform } from "react-native";
import useLocation from "../hooks/useLocation";
import useApi from "../hooks/useApi";
import couponsInArea from "../api/couponsInArea";
const customData = require("../assets/map_styles/day_map.json");
function MapScreen(props) {
//Here is the location hook
var location = useLocation();
const couponBaseApi = useApi(couponsInArea.getCouponBases);
//Here is the API call that needs the location
useEffect(() => {
if (location) {
couponBaseApi.request(location.latitude, location.longitude);
}
}, []);
return (
<View style={styles.container}>
<MapView
followUserLocation={true}
zoomEnabled={true}
showsUserLocation={true}
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
customMapStyle={customData}
initialRegion={{
latitude: location.latitude,
longitude: location.longitude,
latitudeDelta: 0.0158,
longitudeDelta: 0.007,
}}
>
{couponBaseApi.data.couponBases.map((report) => (
<Marker
key={report.couponBaseID}
coordinate={{
latitude: report.latitude,
longitude: report.longitude,
}}
></Marker>
))}
</MapView>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
mapStyle: {
width: Dimensions.get("window").width,
height: Dimensions.get("window").height,
},
});
export default MapScreen;
The solution was that the use effect hook needed to watch for a change on location,
so
useEffect(() => {
if (location) {
couponBaseApi.request(location.latitude, location.longitude);
}
}, [location]);
Thanks everyone!

How to solve: Undefined Promise Rejection (id:0) type error with user location map?

My position is in Vietnam but the device doesn't display the permission asking when I navigate to this screen
Here's the error
I tried to use react-native-maps and import permissions, location from expo-permissions + expo-location
Do I have to catch the error and how to do it?
Also I'm using my real device
This is the code
import React from 'react';
import {
View,
Text,
StyleSheet,
PermissionsAndroid,
} from 'react-native'
import MapView from 'react-native-maps';
import {Permissions} from 'expo-permissions';
import {Location} from 'expo-location'
class MapViewScreen extends React.Component {
constructor(props){
super(props);
this.state={
region:{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.922,
longitudeDelta: 0.0421,
}
}
this._requestUserLocationPermission();
}
_requestUserLocationPermission = async () => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if(status !== 'granted'){
alert('Please enable your location!')
}
let location = await Location.getCurrentPositionAsunc({enabledHighAccuracy: true})
let region = {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.045,
longitudeDelta: 0.045
}
}
render(){
return(
<View style={styles.container}>
<MapView
initialRegion={this.state.region}
showsCompass={true}
showsUserLocation={true}
rotateEnabled={false}
style={{flex: 1}}
/>
</View>
);
}
}
export default MapViewScreen;
const styles = StyleSheet.create({
container:{
flex: 1,
backgroundColor: '#fff',
}
})
I have successfully fixed the problem. By changing initialRegion to region prop in react-native-maps, the screen is able now to show my device location right after I enter the map screen. Thanks all for your help