So now I also want to display a little map preview here and there are different ways of doing that of
course and later we'll also add an interactive map to this app.
For now, I just want to have a static image,
so like a map snapshot and the cool thing is Google has an API for us which generates such snapshots.
You can google for Google Maps static API to find the official documentation where you can learn all
about that of course
and in the end, using that API is super straightforward.
You just need to send the request to this URL and this already gives you back an image, so you
can just use this link on an image component and you're good.
The only tricky thing here is this API key thing, there you need your API credentials and for that, you
need an API key.
Now for this, you can just click on your API key here and generate one and now you can select a project
which you already have or you create a new project and for that
you need to cancel here and instead scroll down a bit further to this
getting started, activate the API part here and click on get started here.
Now once you do that, you're taken to the Google Maps platform console where you can now enable the
different Google Maps features you want to use and here, I'm interested in maps which will later help
us use this interactive dynamic app on Android and I'm interested in places.
So these two things should be checked,
we don't need the routes because we're not building any navigation features here and with that, we can click
on continue, select a project and now either select an existing project or simply create a new
one and I'll create a new one here and name it React Complete Guide but you can name it whatever you
want, click next here
and wait for this to be generated.
This should be relatively fast and now we're worried about pricing whilst
this is loading.
You can generally use this for free but you need a billing account and
that's what I'm getting asked for here.
You need a Google account of course
and on this Google account, you need to have a credit card in order to use it,
otherwise you can't use that unfortunately, it is what it is.
So you need a credit card,
you need to have a billing account set up in your Google account and then you can use this logged in
google account for this project which is what I'm doing here. With that enabled,
you still will be able to use that for free,
you got a very generous free tier and attached you find a link to the pricing of the Google Maps platform
and only if you breach certain limits which we'll not breach for the little usage which we have here in
these videos, only if you would breach these limits you would pay.
Now still be aware that there can be a point where you need to pay and that it depends on how
much you use the API and therefore definitely check out the pricing docs.
Now here, I got this all enabled now and I'm just finishing this up
and by the end, you should be presented with an API key which of course I'll invalidate after these recordings.
So you can't use mine but you should take yours instead and
now this is the API key which you need to insert here into this URL.
So now I'll just copy this entire URL here and move that over into our code and there,
I now want to output an image here which points at that URL because as I mentioned, this is how
you can get this image, this URL returns an image.
Now what I'll do therefore is I'll create a new component here which I'll name MapPreview.js because
I'll also use it in another place of the app later where I import React from React and where I then import
image and stylesheet from React Native, like this.
Then here, I'll create my map preview component which receives props of course unsurprisingly, which needs
to return some jsx later and set up some styles here with Stylesheet.create
and of course also export this map preview component.
Now in here, I want to generate this URL which I just talked about, so here the
image preview URL should be generated and that can be done by using back ticks here so that I can
add dynamic content into the text easily and then copy in that URL you just copied from the
documentation here,
make sure it's all in one line because by default it's not,
so make sure it's all in one line
otherwise this won't work
and now of course there are a couple of segments you need to replace,
for example here, the center equals part. By default, this points at the Brooklyn Bridge and you can enter
addresses here but you can also enter latitude and longitude pairs here.
So what I'll do here is I'll dynamically add two pieces of information here separated by a comma and
the first thing is the latitude. Here
I expect to get this on my props,
I expect to get a location prop and of course this can be any prop name of your choice which then should
have a lat key and here, I want to have a long key, an lng key as well, so that will be the latitude and longitude
of the location
I want to preview. Now the zoom factor, I'll set this to 14,
you can experiment with different factors, this influences basically how far the map is zoomed in or out.
You can also play around with your size here.
Now since I will have a map preview container that I'll typically use with a height of 200, I'll
set the height to 200 here and I will set the width therefore to 400 here.
Of course, you can use a bigger size here than you'll use for the container to display the image later,
just be aware that if you are fetching a super large image here, it will of course be too large,
too much data to download, it will load slower and you might not need that.
So you should aim for a size of the map image here which kind of fits the container where you want to
display it, doesn't have to be the exact same size but roughly. Now map type is how the map should be displayed,
you could use satellite here but I'll stick to the standard road map and now you can also add markers
to that map.
Now there are a couple of markers set up in this dummy snippet,
I'll get rid of all of them but one so that I just have markers here,
color red,
a label of a,
this can be a single character here like ABC and then the latitude and longitude where this marker should
be placed and of course, that's again props.location.lat
and then here a comma and thereafter, replace this number with props.location.lng.
Placing such a marker is optional but of course, I want to show the user where this is.
Now I need the API key, so I'll copy this key which was generated here and replace this here.
Now I can't paste it in like this but actually, I want to manage this in a separate file because I will
use that API key in other places of the app as well.
So here, I'll create a new file which I'll name env.js for environment to set up some environment variables
and there I'll set up an object with my Google API key and that should be this value here and then
I can export this and of course therefore, that should have a name, vars equals and then I export vars
here.
So with that, I can simply import from that env file and that's just what I'll do here,
import env from the env file here and that just stands for environment variables as I said and now dynamically
inject this here.
So now we have one place where we can change that key and where we can also then import it from in all
the different places of our app.
So here I'll dynamically inject env.googleapikey.
So with that, I got the image preview URL set up,
now in this component, we of course need to return the image preview and that generally is that
view I have here in the location picker. So I'll grab it from there and add it in the map preview, like this,
though the fallback content in there,
I actually want to pass that in from outside, so I'll cut this out again and move that back into the location
picker.
However not like this but instead here,
import this newly added map preview component, so import that from ./MapPreview,
so this new component we're currently working on,
add this here,
map preview and then have this check for this fetching and the indicator and the fallback text in here.
So in map preview, I will therefore only have props children in here to output what's added between the
opening and closing tag but that's just fallback content, of course
I do care about outputting the real preview here. Now for that we have to make sure that image preview URL
actually also can be empty in case no place has been chosen yet, so I'll create a variable image preview URL
and just assign a value here
and I do want to assign a value if props.location is set because that also cannot be set in case
we haven't picked a location yet and now image preview URL is either empty or it's this URL depending
on whether we have a location passed in on the location prop and we can now use this down there to output
something
and by the way since I'm using view here, of course we should also make sure we import
view.
Now how do I use this URL?
Well if we do have it, I want to use it to output an image,
otherwise I'll show this props children fallback content.
So here we can check for
props.location, if that's set
I know I'll have an image URL as well,
we could of course also just check the image URL existence and if this is set, I'll output an image
here,
if it's not set, I'll output props children like this, so I'll output my fallback content.
Now the image here will receive some styling, a map
image and a source and the source here takes a URI which points at image preview URL because
that will be a network URL, a network image, right?
So now let's just bring over the styles from the location picker,
I can take a map preview but I only want to bring over the justify content part and actually pass in
the rest manually here and merge it, so I'll still pass in styles.MapPreview from inside my location
picker and in the map preview, I now want to merge this with my styles I'm setting up here. So here I'll
actually wrap this into an object where I pull out all the styles set up in map preview in here and
merge in all styles set up on this style prop so that we can set styles from outside as well and merge
them with our internal styles and now for the internal styles on the map preview, as I just said, I'll have justify
content and align items in here
and for the image itself,
so for the map image, there I want to set this to take all the available width and height it can get
and we need to set this because it's a network image. As you learned, for those you need to set the width
and height of the image component.
Now with that, we have the map preview component which either displays this map image or our fallback
content which is passed in from outside
and it does so by checking the location prop.
So in the place where we use the map preview component which of course is the location picker, we need
to pass in this location prop and the location prop,
if we check the map preview, in the end has to be an object with a latitude and longitude or a lat and lng
key. So therefore back in location picker,
I want to pass in such a prop here and indeed, that's exactly what we manage here with the pick location
which is of course no coincidence. That is an object with latitude and longitude or it's undefined initially
and we do handle this case in the map preview component as well,
if it's undefined, we just show the fallback content which is passed in from outside.
So to location, we can just pass in the picked location and with that, we should now have a setup where we
actually are able to see a preview of the place.
So now here, we see the fallback content
but if I now click on get user location, we see the spinner and then we see a real snapshot of the place
we picked.
As I mentioned, this is not where I am sitting right now,
this is just some dummy place the emulator gives us. The same on Android,
if I take a location here,
now this is actually the Google headquarters which I selected by default there.
So this works, now as a next step,
I want to make sure that we can also pick this place on a map instead of just locating us.