So how can we output the coordinates on a map now for Dad again.
We'll use a Google API if you search for a Google javascript maps or a Google J.S. maps.
You'll find your official talks for the Google javascript Google Maps API.
And here you'll learn how you can use Google Maps in your web application to render a map.
And it's really straightforward and simple.
First of all we need to add this script here which will add this Google Maps SDK to our application.
So simply grab that script and add it to your index H html file above your script.
Now important we don't installed us with NPM because it's not published two NPM hence we use this CDM
link which pulls the script directly from Google's servers.
And here we need to set up our API key.
Now that's of course the API key we already have here in the typescript file so we can just copy that
into index H HTML and replace your API key with it and also get rid of this and callback equals in it
map thing at the end.
This would trigger a function as soon as this map is loaded or as soon as this SDK is loaded.
And that's not something I want here.
So with that we're loading this SDK and now we can use it.
And here's where we'll have a problem.
I want to use it to render a map and rendering a map is actually straightforward in the official docs.
We see that in the end we have to instantiate does Google dot maps dot map constructor function.
Pass a center to it which is essentially well this pair of coordinates we're getting from the back end
and assume level so we can just copy this and then here once we've got the coordinates execute this
code and maybe store map here in a constant name map.
But of course we get an error here cannot find.
Name Google and that makes sense.
This will be available globally but typescript does know that it will be available globally because
of this javascript SDK we're importing but of course typescript doesn't know this.
You'll learn what you can do there.
You can of course use declare var Google and set this to any and with Dad you are telling typescript
it's fine.
This will exist.
Don't worry we can do that and the error goes away.
Now we can all use our coordinates here instead of the hard coded ones.
And if we all do want to render a marker that's all the possible in the official docs if you click on
adding a map with a marker we learn that adding a marker is straightforward.
We just use the map.
We created and create a marker with this command and point at this map.
So I will just copy this code snippet here and back in our code after we created the map.
I create my marker like this and the position here again are my coordinates so this will now render
a map and place a marker on it.
The only remaining thing is dead.
We need to ensure that this map is rendered in the right place.
By default it looks for an element with an I.D. map and that is what we have here.
But if you chose a different idea here make sure to adjust is in your typescript code and was that if
we save this ID compiles without errors.
And now if I enter an address here it should render this.
So this is working and we can adjust to some level here to be assumed in a bit more for example changes
to 16.
And now if we try as we can see a bit clearer but it is working and that is what we can tell.
We can stroll around and use this map.
This is all nice but it's not optimal.
Of course it works things to declare war.
Google we're not getting any errors but we're also not getting any type support.
If I introduce an error if I for example refer to DOD map instead of DOT maps it compiles without issues
and it only crashes in production thereafter.
If I try to render a map.
Now I get an error here caught by our error handler.
So this is of course not what we want.
We want type support.
We want to handle dumb mistakes like this during development and not at runtime.
So how can we ensure that typescript knows Google Maps types to the rescue.
If you search for types Google Maps you find various packages which add types for while Google maps.
Now we didn't install the Google Maps package through NPM but we can still install types for that package
through NPM.
And here I'll go for it is first package and simply install that into our project.
So let's go back with the development server and run npm install dash dash save dash death at types.
Slash Google Maps.
One word that was the name of this package.
This will now install global types for this package.
So now I have a restart.
Does with NPM start.
Let's see if we have a better situation.
If I remove this.
Declare war thing here or I commented out.
It still compiles.
Now this Google Maps thing here is detected.
And if I tried to access dot map here I get an error.
I also get all to completion now and it sees yes there is a maps thing.
It also tells me that this map constructor needs a div or an element where it should render the map
as a first argument and then some options for the map.
So this is now working here as it should.
And this is of course a great step forward because now we have our working application and it did work
before as well but now it works also with types and with a proper type support and this day offer is
no great practice for how you build applications with TypeScript and use certain types good features
but it's especially a great practice for how you can work with third party libraries.
Some like access bring their own types.
Others aren't even installed with NPM and yet you can add types with an appropriate types package.
I hope this module was helpful for understanding this and deal for all the for all future projects you
might be working on where you most likely will also work with certain third party libraries.