Google maps and directions

How to / Third Party Tooling
1

Hi
I am new to expo.
Please help me in working with google maps API to plot the route from source location to destination location and accessing the direction coordinates. (If possible suggest a tutorial for using google maps in expo)

2

Hi :wink:

You can use react-native-maps, check out the documentation.

i added an example “getting directions”, when react-native-maps is settled

    async getDirections(startLoc, destinationLoc) {
       try {
            const resp = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${startLoc}&destination=${destinationLoc}&mode=${this.state.mode}&key=${GOOGLE_MAP_KEY}`);
            const respJson = await resp.json();
            if (respJson.routes.length > 0) {
                const points = Polyline.decode(respJson.routes[0].overview_polyline.points);
                const coords = points.map((point, index) => {
                    return {
                        latitude: point[0],
                        longitude: point[1],
                    };
                });
                this.setState({ coords });
            }
            return;
        } catch (error) {
            alert(error);
        }
}

Polyline is coming from ‘@mapbox/polyline’ in my case.

Hope it will help you out :wink:

3

This is for react native right. Is this compatible for expo

4

Yeah :wink: GitHub - expo/react-native-maps: React Native Mapview component for iOS + Android