In so many versatile ways, almost every website needs maps in some shape or form. The use cases for these could be infinite. Business websites use maps to show their business location to let potential customers where they are located. On the medical side, we are seeing maps used to show clusters of covid cases for regions and countries. I know this is sad but technology helps us to protect ourselves better.
So now that we know how maps could be so important in websites when we think about maps, the first thing that comes to our mind is Google Maps. Google maps have taken over the maps market by far.
Google Maps is such a powerful tool that you interact with them in so many different ways.
In today's blog post, we will see how we can create and add Google Maps to our website in different ways using the Google Maps Javascript API.
We will use HTML, CSS, and JAVASCRIPT to build our website and then use Google MAPS API and show a map.
Creating and Signing Into A Google Cloud Account
The first thing we need to do is to sign into https://console.cloud.google.com using your google account.
Go to the search bar on the top and type "projects" and click on the sugestion "Create A Project".
Then specify the name of the project you want to create.
Click on the "Create" button to create a new project.
Creating A Google Cloud Billing Account
From the side menu, click on "Billing".
Once you have the billing page open, From the side dropdown "Billing Account", select "Manage Billing Accounts"
Then click on the "Create Account" to create a billing account. Follow the steps and you should be able to create a new billing account if you don't have one already.
Mapping Project To Billing Account
Once you have created the billing account, you can go to My Projects tab as in the above picture and map your project to the billing account if they are not mapped already.
To configm if you have done the mapping of the project to the billing account correctly, follow the below steps.
Search For Manage Billing
Check and Update Project Mappings
You can now check or update any mappings that you have under the current billing account.
Enabling API In Google Cloud Platrom
Click on the side menu and go to "Marketplace". You can either search for the API that you want to enable or just go to the category and click on the API.
In our case, it's the Google Maps Javascript API. This API is used by APIs that can run javascript to run Google Maps.
Click on the "Enable" button to enable the Google Maps Javascript API for your Google Project.
Creating Google Maps API Key
We will now go ahead and create a new API key for our Google Maps Javascript API. The API key is a secret key that is used by google to check and control the usage of the API that it exposes.
From the side menu, click on "Credentials"
Click on the button on the top that says "Create Credentials" and click on the API Key button. This will create us a new API key for this Google Maps Javascript API.
We will keep this API key handy as we need the API key at the time of embedding the Google Maps into our website.
Restricting The API Key
It is a good idea that you restrict this API key when you are about to use your website in production or use a different API key in development and production.
Use the "Restrict Key" option as you can see from the above picture and there will be a few options and parameters on which you can restrict your API key.
You can add the IP Addresses or the HTTP Referes (for websites) and you can enter the production domain URL so tha it runs from only your domain and no where else.
Embedding Google Maps In Our Website
We have a basic HTML structure for our website that we will use but you can use any existing web page that you have.
Basic HTML Structure
As you can see, it's a basic HTML structure and we are linking our CSS stylesheets and the script in the head section of the HTML.
We also have a div element with an id of map where we will be embedding our Google Maps.
This div is going to be the container for our maps.
Adding Google Maps Javascript API Script
Paste the below script tag into the HTML just at the end of the body tag.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly" async></script>
The HTML should look something like this after adding the Google Maps API Script tag.
Replace the API key with the API key that you copied when we created the credentials.
Setting CSS Styles To Google Maps DIV (Important)
One of the most common mistakes I have seen is developers not giving the maps container a style. The styles are important on this maps container because if we don't do this, the container has a zero px height and zero px width. Even if the maps are loading correctly on your website, users and yuorself won't be able to see it because the container does not have a width and height.
For this example we will use a full width map but you are free to use any style you want. Just make sure it has a width and a height.
Add these CSS styles into the style.css file of your website.
Adding Our Script For Embedding Google Maps
Add the below script to your script.js and we will look at it's breakdown.
Here's how the script looks like. Let's break this down and understand what's happening in the script.
Let's look at the function initMap. We are creating a new function named initMap.
Inside that we are assigning the return of a new Google Maps Map instance to the map variable.
Inside the google.maps.Map method, the first arguement it takes is the container in which we want to embed.
We are getting the container element using document.getElementById('#id)
Then the method takes 2 parameters in it's basic example, a center point which takes the latitude and the longitude of the center point you want to show on the map.
The second parameter is the zoom level you want to show on the map.
As you can see, after creating the new initMap function, we are not calling it anywhere, this is because the script we added to the HTML calls this function as a callback.
Once all of this is in place, run your website and you see Google Maps loaded into the map container and you get a website in which we have a fully interacting Google Map.
