How to Use Google Maps in React Native - Part 1

This is part 1 of 2 part set to show how to use Google maps in React Native for both Android and iOS. This video focuses on the basics of the MapView, Marker, Callout, Polygon, and Circle components. Part 2 will cover more in depth use cases and UI

00:00 - Intro
00:48 - Setup overview and documentation
08:16 - Adding the MapView component
11:38 - Adding the first marker
13:28 - Creating a custom callout for the marker
15:21 - Using an image in the marker icon
16:28 - Creating a polygon from an array of coords
19:30 - Creating a colored circle from an array of coords
21:00 - Handling the onPress event of a callout
22:46 - Displaying multiple markers

[asdgamingsl]

love you i was spend one and half day, trying to fix this map configuration errors. you saved me bro.. thank you

[nadeemaamir]

Amazing.. Thank you sir for detailed and to the point information about React Native Maps

[haridevks]

When using the region property, have you had any problem with the panning of marker (zoom out) and whether the map lags while moving the marker.

I have used this package and is now facing this issue when we use it in a real device. On emulator, error appears to be less

[leolima]

Hello.
What types of libraries to use, in situations:
I have a single inputText on the screen, and 6 hidden inputsText, I type the first address, the counter makes the sum of the distance from where I am and where I am going, I have 5 routes to type from different addresses, each route with a different distance from the starting point,

route a = 7 km with U $ 7;
route b = 5 km + route a (7km) = U $ 12;
route c = 2km + route a (7km) + rotate b (5km) = U $ 14;
Route d = 3 km + route a (7km) + rotate b (5km) + route c (2km) = U $ 17;
Route e = 1 km + route a (7km) + rotate b (5km) + route c (2km) + route d (3 km) = U $ 18
route f = 3km + route a (7km) + rotate b (5km) + route c (2km) + route d (3km) + route e (1km) = U $ 21.

And in the consultation I regret it, as I exclude the routes I want, the total amount and the distance will decrease

Would it be a good way to start understanding map componentization?

[mohammadumer]

Great job brother your work is awesom thanks for the video.

[baibing]

Hi, if I have a multipolygon data and I don’t want to use the geojson component, can I use polygon component to present data to ui, thanks.

[mazhartejani]

Thank you for the tutorial, Marker callout image is not showing in android.
someone suggested to put image tag in text tag like this
<Text> <Image /> </Text> but then the image is showing but it is half cropped.

can you please help with this issue?

[domagojhamzic]

Thank you very much, sir, you've helped me a lot :), Cheers :)

[leolima]

And how to do for adb little or a lot of journeys, like it starts with two text inputs, then the person clicks on a cross icon, and a third text input appears, and as the user creates new routes, he calculates new distance, if the user mix long paths in front and short paths later, how to make the map use an intelligent matrix and organize the route to start first the routes closest to the origin, the originated order? what would this javascript look like in react native?

[DRAGONW]

Is there a way to generate polygons dynamically, or do I have to hard code values for all the polygons?

[kameal]

Is there any way to draw a polygon by finger somewhow? react-native-maps doesn't provide this kind of feature

[mohammadumer]

Please tell me how can i put the icon in the map screen to view full screen, and how can i change to satelite

[malikgen_]

how a user can create its own Polygon points in frontend UI on map, for example a user wants to search listings only in between this area which user selects with polygon ???

[GaCongNghe.]

Good video, nice to meet you, i like it

[ShubhamGupta-jpxk]

Hey can we get a tutorial on marker clustering? Loved your videos. Will help a lot of people and will also complete the whole series. And Thank You. You are great :)

[TheProGamingWolf]

How do you search for a lcoation with a text input and it move the map view. ty

[malikgen_]

love you man, i was looking for a tutorial like this, you do udemy courses on RN or MERN ? let me us know please ...

[jopamate]

Hey. Can I use your api key for my app what I am working on for school project. I dont understand google billing account and how much it is free

[JimDragonBass]

is it necessary to have a billing account or i can automatically use the free tier?

[asdgamingsl]

sir... can you help for installing react-native-google-places lib and configure correctly same as maps