Now my goal here is very simple, I wanna build a simple web application where we can enter an address, then I want to look at this address and convert it into a pair of coordinates. And we'll do this with help of Google, with one of Google's APIs. And then I want to render these coordinates, I want to show these coordinates on a map, which we will also render with help of Google Maps or with help of Google, specifically with the help of the Google Maps JavaScript SDK.

Doing some setup:

index.html:

Here, on line 10 we added a app.css file for styling. In that file(app.css):

Now the webpage will look like:

Getting User Input

Here, first we get the form (line 1) and then the address input tag (line 2) and type cast it to HTMLInputElement and on lines 4-8 we have our submit handler which will be called when user submits.

Now, lets add Googles APIs here:

The official docs: https://developers.google.com/maps/documentation/geocoding/

Setting up Google API Key

NOTE: You will need a credit card to do this.

Here, on the docs press Get Started. It will take you to:

Press on continue and it will ask for credit card. After that part is done, you will get an API key: