In February, Google Maps will be 16 years old. While the technology has been around for a long time, the improvements and advancements made by Google Maps are nothing short of incredible.
One of the biggest boosts to the popularity of Google Maps was the introduction of the Google Maps app for Android and iOS smartphones. A few years after this happened, Google Maps emerged as a trusty companion for those finding their way in localities, cities, and even countries they have never visited in the past.
Today, equipped with cutting edge technologies like satellite view and street view, Google Maps continues to enjoy a lot of popularity, and for a good reason. In fact, the popularity of Google Maps has soared so much that Google Maps marketing has become a serious aspect of local marketing on the web.
As website owners, we can also use Google Maps to our advantage. The best part is, for private use, doing this is absolutely free. Don’t worry; the commercial use of Google Maps on business websites is also incredibly affordable.
In this article, we will be discussing how you can embed Google Maps into your own website. However, before we go forward with that, let’s look at a few benefits of embedding Google Maps on your business website:
- Adding Google Maps to your website is especially advantageous if you are operating a local business. Consider the example of an SEO website in Maryland. Adding a Google Maps API will not just enable this Maryland search engine optimization company to get featured in the Google My Business section; it will also enable them to guide interested prospects to their offices, right from their website.
- Having a map adds to the information about your business on your website. More information communicates transparency to the visitors on your website, helping you build credibility in front of website visitors with more efficiency and effectiveness.
Without further delay, let’s jump right into it:
Embedding Google Maps To Website For Private Use
The first and most obvious step of this process is to create a Google account if you don’t already have one.
Once done, open up the Google Maps application on your web browser. In the search bar on the top left, search for the area or establishment you want to be highlighted on the map.
After you have located your business, simply click on the menu button on the top left and select the “Share or embed map” option.
You will be presented with a pop-up dialogue box with two options. The default option is “share a link” at the top of the pop-up dialogue box. Right beside it would be the option to “embed a map.”
When you click on “embed a map”, you will be presented with the option to select the map display size on your website. By selecting the “Custom size” option, you can customize the size of the map and more importantly, check out a preview of the size.
When you have found the satisfactory size, simply click on the “COPY HTML” button above the map.
Now, all that is left for you to do is paste this code into your website’s source code, and you are good to go.
As mentioned earlier, this type of integration is free and is only available for private use. Usage of this integration, known as iFrame integration, on a commercial website may lead to problems.
To avoid them, opt for an API embed of Google Maps for your business website.
The process is a bit more complex, but it is well worth the effort if it helps your customers find out more about your business and its location without trouble.
Here’s how you can embed a Google Maps API on your website:
Embedding Google Maps To Website With API
Before I lay down the steps for this, it is important to note that to successfully complete this process without running into technical glitches, it is advisable to know concepts of Javascript, HTML, and CSS.
With that out of the way, let’s begin:
Step #1: Create A Google Account
Just like working with the iFrame technology, embedding a Google Maps API to your website requires you to have an active Google account. Next, go to Google’s API Picker, where you can read about the different APIs and their use cases, and in turn, select the right one for your website.
Note that embedding these APIs on your website comes with a price tag attached. However, the APIs for Android and iOS apps are free. Moreover, Google offers a $200 monthly credit, which it claims is enough to satisfy most online businesses’ map-related needs.
Once you have picked out the API you need and have understood the subsequent charges involved, you can move on to the next step.
Step #2: Create A Fresh Project
Go to the Cloud Console and log in with your Google Account.
Next, from the Menu button (three bars at the top left) and select “Home.” On the next page, you will see a project drop-down menu where you can create a new project.
Once you select that option, you will be asked to fill out your project’s information, including project name, project ID, relevant business information, and information about your business.
When you are done adding the details, click on the “Create” button at the bottom, and you will be good to go.
Step #3: Enable Relevant Map API
Visit the Maps API Library and select the API you want. If you are still confused about this step, go back to the API Picker page mentioned in Step #1 and read more about the different Map APIs.
After you have found your ideal API, click on it, and you will be taken to a page dedicated to that API. In this example, we will be selecting the Javascript API, which is the most widely preferred choice for basic business websites.
Here, you will see a blue “Enable” button under the name of the API. If you have already enabled this API, you may see a “Manage” button instead.
Click on the button, and you will be taken to the API dashboard.
At the top of the “Metrics” page, you will see a drop-down menu with your selected API’s name.
Click on the drop-down menu and then click on the “Enable API” button.
Step #4: Get An API Key
To execute the next step, log in to your Google Cloud console, and in the menu on the left, select the “credentials” option.
On the next page, you will have the option to “create credentials” at the top.
When you click on that option, a list will appear with “API Key” at the top. Google will then create an API key and hand it to you.
Once you have your API key, add it to each Maps Javascript Request. The code should look something like this:
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap”
type=”text/javascript”></script>
In the above example, your unique API key will replace “YOUR_API_KEY.”
Read more about this in this guide by Google.
Conclusion
As mentioned at the beginning of this article, embedding Google Maps on a business website is a technically demanding task. As experts of SEO in Frederick, MD, we can help you with this and everything else that can potentially help your business website drive better and more organic traffic.
