All right so let's figure out how we can show an actual map inside of our map component to do so at
the very top.
I'm going to add an import for map view from a library called React Native maps.
Now you might not recall installing this module.
And that's because we never did install it.
It turns out that when we generated our project with Expo much earlier many videos ago we automatically
got React Native maps installed into our project for us.
So whenever you use Expo to generate your project out of the box you can start making use of maps on
your device so this map view thing right here is a react component so we can show it inside of our map
component instead of displaying a simple piece of text right there.
Let's instead return an instance of map view I'll then save this flip back over to a track create.
And sure enough we see absolutely nothing.
So a map view component is very similar to an image.
Remember we learned how to show images much earlier in this course.
By default an image has no height or and no width assigned to it.
So in that view it is very similar.
If we want to get a map to actually show up we'll show a map view component like we have right here.
But we also have to assign it at least a height property.
So inside my style's object I'm going to add in a styling section here called simply map.
And then inside there I'll give it a height of like three hundred or so and then I'll sign that style
to the map view we just created.
So I'll say style is styles dot map let's now save this again.
And if I go back over to a track Create Now I can see a map appear on the screen.
This is a fully featured map so I can kind of drag around I can zoom in do just about anything you would
normally be able to do with the map.
And if I flip over to Android I should see the same thing over here as well you'll notice the difference
between these two devices out of the box a android device is going to show a Google Map map but on ISIS
we're going to see an Apple Maps map.
So there are some subtle differences in how these maps are going to be displayed for example by default
a Google map is going to center on Latitude Zero longitude zero which is just about right there whereas
an Apple map is going to try to center on your local country so for me I'm inside the United States.
I get a big view of the United States.
But if you're in some other country you might see a default or slightly different default view than
what I see.
So just showing you that view.
Well simple enough but obviously we're going to want to start to customize this thing somehow.
So let's start to understand how we can say maybe change where the map shows by default if we want to
change the initial location showed on this map we can add in as you might guess an additional prop to
our map view.
It's going to give myself a little bit of space here and then I'll add in a prop called initial region
so inside of a map view this region thing is essentially a reference to some location in the world that
we want to show initial region means.
What should we show on our map when it first is rendered to the device.
So inside this object that we pass in for this prop we have to define four different properties.
We're going to pass in a latitude and longitude a latitude Delta and a longitude Delta latitude longitude
are essentially where we're going to center the map on.
So as you just saw with Google Maps back over here the default was Latitude Zero longitude zero with
IOW for me it was probably around like 122 and I don't know something else to center on the US the latitude
Delta and longitude Delta are essentially a measurement of how much area or essentially kind of like
what zoom level we're showing.
Let's take a look at how we actually set these properties and you'll get a better idea of what these
delta values really mean so for my latitude and longitude I'm going to put in a latitude here of 30
7 3 3 2 3 3 and then I'll put in a longitude of negative 122 0 3 1 2 1 then for my latitude Delta I'm
gonna put in a zero point zero one and zero point zero one for longitude as well.
Now I'll save this and I'm going to see a very different initial view.
It's now my initial view right here is the Apple headquarters in Mountain View or something not Mountain
View where they're located Cupertino.
That's right.
So that's the Apple headquarters right there.
And I should see the same thing over on Android as well.
So again we can change what view is shown inside of our map by default by setting this initial region
property case.
Now we've seen some basics around the map view.
Let's take a quick pause right here in the next video we're going to start to understand how we can
start to draw a line on this map and also try to show some like indication of where the user currently
is.
It's a quick pause and I'll see you in just a minute.