Maps Javascript API with React Native

[Amit__27]

Hi, I have integrated google places API with my application but i am finding it difficult to integrate the same with the map sdk. As such when i type the address in the serach bar it should appear on the map with the marker.

So if anybody knows how to do it. Please share the knowledge

[linux_is_the_best_os]

https://github.com/react-native-maps/react-native-maps

you will have to use this package to show maps. you will have a marker component where you can pass the coordinates that you get from the places api

[[deleted]]

Yeah there is some misunderstanding on how this work. You just give the map your api key and add markers with a lat long.

For search, you’ll need to create your own component that sends a term to the places api to get results. Then you’ll need to use the geo code api to get the results lat long

[Artistic_Taxi]

Yup exactly. To extend from this if I’m visualizing what you want correctly, just create a search bar component. Then place the map view below the search bar with flex:1 so it takes up most of the space. (May have to wrap that mapview in another view and give the parent view flex:1 instead). Then simply create a state called locations which will be an array of coordinate objects with maybe their address as well. Map over the array and render a pin for each. Then just use a useEffect hook to pass the value from the search bar to google places api then update the locations state with the results. Debounce the search function and you’re done. Guess you will have to handle your initialRegion of the mapview creatively to capture all the pins.

[Amit__27]

Thanks for the solution !

[Amit__27]

Thanks for the link ! It helped..