I am building mobile application in React Native, in one of my screens I am trying to create a map with calculated route. I want to calculate this route using GooglePlacesAutocomplete. Origin point will calculated with geolocation but it's not important in m question. Destination is my problem. I am using expo app on iOS. That's my code:
import React, { useState, useEffect } from "react";import { StyleSheet, Text, View, ImageBackground, Pressable, TextInput, KeyboardAvoidingView, Linking,} from "react-native";import { useNavigation } from "@react-navigation/native";import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";import MapView, { Marker } from "react-native-maps";import MapViewDirections from "react-native-maps-directions";export default function RideScreen() { const [destination, setDestination] = useState({ latitude: 48.9, longitude: 19.6333, }); const [origin, setOrigin] = useState({ latitude: 49.9, longitude: 18.6333, }); const navigation = useNavigation(); useEffect(() => { console.log("Destination updated:", destination); }, [destination]);return(...//some code<GooglePlacesAutocomplete GooglePlacesDetailsQuery={{ fields: "geometry" }} placeholder="Enter Location" onPress={(data, details = null) => { console.log(data, details); console.log(JSON.stringify(details?.geometry?.location)); console.log(details.geometry.location); setDestination(details.geometry.location); }} query={{ key: "AIzaSyDrWNn9cbscPSSRHNdKQFiCTTLqk74-4mA" }} fetchDetails={true} onFail={(error) => console.log(error)} onNotFound={() => console.log("no results")} listEmptyComponent={() => (<View style={{ flex: 1 }}><Text>No results were found</Text></View> )} styles={{ container: { position: "absolute", zIndex: 9999, width: "100%", }, textInputContainer: { flexDirection: "row", width: 350, borderRadius: 5, borderWidth: 0.1, borderColor: "#eee", marginHorizontal: 20, }, textInput: { backgroundColor: "#FFFFFF", height: 44, borderRadius: 5, paddingVertical: 5, paddingHorizontal: 10, fontSize: 15, flex: 1, marginTop: 10, }, poweredContainer: { justifyContent: "flex-end", alignItems: "center", borderBottomRightRadius: 5, borderBottomLeftRadius: 5, borderColor: "#c8c7cc", borderTopWidth: 0.5, position: "absolute", zIndex: 9999, }, powered: {}, listView: {}, row: { backgroundColor: "#FFFFFF", padding: 13, height: 44, flexDirection: "row", width: 350, marginHorizontal: 20, }, separator: { height: 0.5, backgroundColor: "#c8c7cc", }, description: {}, loader: { flexDirection: "row", justifyContent: "flex-end", height: 20, }, }} /><View style={styles.container}><MapView style={styles.map} initialRegion={{ latitude: 49.9, longitude: 18.6333, latitudeDelta: 0.05, longitudeDelta: 0.05, }}><MapViewDirections origin={origin} destination={destination} apikey={google_key} strokeWidth={4} strokeColor="red" mode="DRIVING" onError={(error) => console.log("MapViewDirections Error:", error) } onReady={(result) => console.log("MapViewDirections Result:", result) } /><Marker coordinate={origin} title="Starting Point" /><Marker coordinate={destination} title="Destination Point" /></MapView>... //rest of the code
So, origin is set with no problem and maps can easily find it. But not with destination. If destination i set with default, my app can set the route but if i choose destination from my autocomplete input then i got the error. My logs:
Destination updated: Object {"lat": 49.8223768,"lng": 19.0583845,}Object {"description": "Cieszyn, Poland","matched_substrings": Array [ Object {"length": 5,"offset": 0, }, ],"place_id": "ChIJtd7hQfIDFEcR8gl_Serl1c4","reference": "ChIJtd7hQfIDFEcR8gl_Serl1c4","structured_formatting": Object {"main_text": "Cieszyn","main_text_matched_substrings": Array [ Object {"length": 5,"offset": 0, }, ],"secondary_text": "Poland", },"terms": Array [ Object {"offset": 0,"value": "Cieszyn", }, Object {"offset": 9,"value": "Poland", }, ],"types": Array ["locality","political","geocode", ],} Object {"geometry": Object {"location": Object {"lat": 49.7497638,"lng": 18.6354709, },"viewport": Object {"northeast": Object {"lat": 49.79296407539032,"lng": 18.70581445993146, },"southwest": Object {"lat": 49.71860345901323,"lng": 18.59706863867689, }, }, },}{"lat":49.7497638,"lng":18.6354709}Object {"lat": 49.7497638,"lng": 18.6354709,}Destination updated: Object {"lat": 49.7497638,"lng": 18.6354709,}MapViewDirections Error: Error on GMAPS route request: NOT_FOUNDMapViewDirections Error: Error on GMAPS route request: NOT_FOUNDat node_modules/react-native-maps-directions/src/MapViewDirections.js:217:6 in setState$argument_1- ... 8 more stack frames from framework internals
It looks like destination is okay so why Google Maps can't find the point?
