Geocoding is the process of converting addresses (like a street address) into geographic coordinates (like latitude and longitude), which you can use to place markers on a map or position the map. That means we need a full address like Anfield Rd, Anfield, Liverpool L4 0TH, United Kingdom to get the coordinates -53.4318476,-2.9609068.

You can see the project’s snapshot below or try playing with it here.

Code structure

The address can be typed or copied and pasted from Excel or a Google Sheet. It’ll automatically fill the latitude and longitude values if successful. If not, then the value will be Failed. You can also download the data into a CSV. If you paste more than seven rows, it’ll add the extra rows automatically.

---

Before You Begin

We’ll use the Google API key in order to get the coordinates — i.e., latitude and longitude. If you don’t have the API key, you can create one from here.

We’ll also use the following libraries:

• [react-datasheet](https://github.com/nadbm/react-datasheet) is a simple React component to create a spreadsheet (meaning it generates a table with cells)
• [react-csv](https://github.com/react-csv/react-csv) is a component that’ll generate a CSV file from the given data. This data can be an array of arrays, an array of literal objects, or strings.
• [axios](https://github.com/axios/axios) is an easy-to-use promise-based HTTP client for the browser and Node.js

#google-maps #javascript #react #programming