How to fix a broken Google map on your website

Adding Google Maps to your website used to be a simple and free process. Since updating their pricing plans in 2018, many users will now see an error message where their location map used to be. This can be very frustrating for your website visitors.
It used to be as simple as embedding a map on your website by copying and pasting a bit of code. Many themes and plugins make this even easier, by allowing you to simply drop your address in and generate a map automatically. Google has since updated their terms of use and added a few extra steps to the process. While it might not be as simple as it was before, it certainly isn’t impossible!

Why use Google Maps on your website?

There are plenty of other map plugins available, so why bother using Google Maps at all? The simple fact is that Google Maps is familiar to users. It can also help customers to find you, as they can click through and then enter their own address.
They are just a few clicks away from discovering the best way to find your business. Other map plugins might make it possible to see where you are, but users want more functionality from a map. This is why Google Maps has always come out ahead.

Oops! Something went wrong.

When you see this message, you know that it’s time to update your Google Maps. In 2018, the Google Maps Platform Team announced:

“Beginning June 11, you’ll need a valid API key and a Google Cloud Platform billing account to access our core products. Once you enable billing, you will gain access to your $200 of free monthly usage to use for our Maps, Routes, and Places products. As your business grows or usage spikes, our plan will scale with you.”

So what does all of this mean?
To access Google Maps, you will now need to:

  1. Sign up for Google Cloud billing
  2. Connect a valid credit card
  3. Access and implement your API key

If you’re a small business, you don’t need to worry about being billed to use Google Maps on your website. Google offers $200 of monthly Google Maps credit. To understand how far this free credit can go, you can access the Google Maps API pricing here. If you do exceed this amount, you will be notified so you can decide if you want to continue using it.

How do I get my Google Maps API key?

Start by going to Google Cloud Console and logging in (or creating an account, if required).
You will then need to head to Billing > Manage Billing Accounts > Add Billing Account.
Once you have agreed to the terms and conditions, you can add your business name, address and credit card information. Remember, you won’t be charged until you exceed $200 per month of usage.
Next, you need to get your API key.
To do this, go to the Google Cloud Platform Console. If you haven’t done so already, create your project. Then click on the project drop down and select your project.
On the “Credentials” page, click Create credentials > API Key
You will then see your newly created API key. After you click close, you will be able to see your API key on the Credentials page under API keys.
You can also apply restrictions to your API which can help to reduce the number of requests and keep your API key within the free account limits. You can learn how to do this here.
Once you have your API key, you can add this into the relevant field on your website. Most themes with Google Maps enabled will have a field for you to add your API key.
If you’re struggling to get your Google Maps running correctly, get in touch with Auburn! You can learn more about our website design services here.