Consider separating google maps API from Visual component

I think this is better if someone wants to keep updating a route.

IMO relying on component render and updates seem flimsy but I can maybe see the appeal of rendering something once.

Your functions within the component are already sort of separated. Here's a working example of the more complete example if you were to separate the API

```js
...
componentDidMount() {
mapDirections({
origin: base.address,
waypoints: addresses,
destination: base.address,
apikey: GOOGLE_MAPS_APIKEY,
optimizeWaypoints: false,
}).then(result => {
this.setState({directionResults: result})

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;

this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
}).catch(err => {
throw err
})
}

renderMarkers() {
if(!this.state.directionResults) return;
return
}

render() {

{this.renderMarkers()}

}
...
```

No file or test is named. Start by locating the directions component and the current Google Maps request and rendering flow, then compare it with the example's componentDidMount and renderMarkers structure. Done means the API request can be separated from the visual component while route updates and map rendering still work.

Written by the indexing model from the issue text.