Using an already existing API to our advantage is far better and easier than creating one from scratch.
I have used this on my website and it is super easy and free.
How to get Google Map API🌎
Go to the Google Cloud Platform Console.
Click the project drop-down and select or create the project for which you want to add an API key.
Click the menu button and select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key.
The API key created dialog displays your newly created API key.
Click Close.
The new API key is listed on the Credentials page under API keys. (Remember to restrict the API key before using it in production.)
Add the API key to your request😉
You must include an API key with every Maps JavaScript API request. In the following example, replace YOUR_API_KEY with your API key.
<script
async
defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
type="text/javascript"
>
</script>
Steps in Detail
Go to
Press the 'Get Started' button. In the window that opens, tick both 'Maps' and 'Places'. Press Continue. At this stage, you will be asked to create a Google account or log in to your existing one.
In the updated window, choose 'Select a project' and enter the project name (e.g. Set Compass) in the box below. Then click Next.
In the updated window, click Create Billing Account
After clicking Next in Step 2, will be offered to enable your APIs. Press Next.
You will see a new window with your API key in the box. Save the key to be able to use it and press Done.
7.(Optional) To protect your API Key and prevent anyone else from using it, click on credentials in the left pane then click on the project name as shown below.
8.(Optional) From Application restrictions select HTTP referrers (Web sites), enter https://setcompass.com/* in the Accept requests from these HTTP referrers (Web sites). Then click Save.
9.Finally go to the registration page at setcompass.com, fill in all the fields and paste your copied Google Maps API Key as shown below.
