Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load Google Places API in React Native?

Tags:

react-native

I am trying to use the Google Places API in react native. I first tried using fetch to make requests directly, but I just saw that you have to use the existing classes/objects provided by Google, like the PlacesService. Searching for React Native libraries that include the API objects for you just brings up some that do the autocomplete feature and not much else.

The Places API docs say to load the library using this url: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

This is straightforward to me in regular web dev, but not in react native. What is the standard procedure for loading a library like this in React Native?

Right now I have copy and pasted the JS contents from the link above into a file in my React Native project. But, I don't even know how to export it as I can't really tell what the name of the object/function is. google ? google.maps ?

Right now I am doing:

export default google.maps

and also tried

export default google

but these both throw this error:

cannot read property 'createElement' of undefined

This is my first React Native project, so I'm sorry if this is a basic question.

Thanks for the help.

like image 974
srlrs20020 Avatar asked Dec 18 '17 22:12

srlrs20020


People also ask

How to integrate the Google Maps API into React applications?

How to Integrate the Google Maps API into React Applications Step 1 — Setting up a React Application. For this tutorial, you are going to use create-react-app for scaffolding a new... Step 2 — Using Map and GoogleApiWrapper. Next, you will need to edit your App.js file and replace the code with ...

How to add Google-Places-autocomplete with React-Native?

Step 1: install the npm plugin for google-places-autocomplete. npm i react-native-google-places-autocomplete. Step 2: now need to link google-places-autocomplete plugin (if your version is below 0.61). react-native link react-native-google-places-autocomplete. Step 3: create your google developer account and find the map key then use it ...

Where can I find the source code of React Native maps?

Full source code of end result is available at: https://github.com/nshaposhnik/react-native-maps-example First, let’s add all relevant dependencies: Then, you need to obtain Google Maps API key.

How to get Google Maps API key for Android?

Then, you need to obtain Google Maps API key. Navigate to https://console.developers.google.com/ , create new project over there, and then enable three APIs: Maps SDK for Android, Places API, and Directions API.


1 Answers

but I just saw that you have to use the existing classes/objects provided by Google

I'm not sure what you mean by that. Places api can be done via fetch/api request. Look at how react-native-google-places does it at https://github.com/FaridSafi/react-native-google-places-autocomplete/blob/master/GooglePlacesAutocomplete.js#L227 They use a new XMLHttpRequest(); but fetch() would work as well. It is web api and I don't think you need to run any external javascript/load any external js files.

like image 200
Travis White Avatar answered Nov 10 '22 17:11

Travis White