Why does Google Maps not work on my website?

Maybe you are setting up a new website or revisiting and updating an existing one? Like 5 million other active apps and websites you want to share your location in a way that is familiar with your (prospective) clients and employees. However, the popular and ubiquitous Google Maps isn’t working! 

Back in 2018, maybe you were: following the much anticipated royal weddings; gripped and willing the rescue of twelve boys and their football coach from a flooded cave in Thailand; or caught up in the furore of football potentially coming home. If so, you may have missed the launch of the Google Maps Platform.

The Google Maps Platform - previously known as Google Maps APIs and before that as Google Maps for Business - was an effort to bring together all of Google’s various map functions: Dynamic Maps, Streetview, 360 Degrees, Google Routes (Directions) and Google Places. It was also a shift in terms of billing.

Wait, what costs are involved? It may or may not be news to you, but Google Maps - a free app so many of us take for granted on our phones - in some cases is actually paid for. For a majority of businesses and users, simple dynamic maps have always been free to use. However, for enterprises racking up stratospheric numbers of Google Maps queries it is a service that comes at a cost. Previously, there existed two plans: Standard (some free daily usage plus additional daily capped usage which was billed monthly) and Premium (an annual, prepaid, credits-based licence with unlimited usage). With the ‘new’ Google Maps Platform it is a simplified pay-as-you-go model; you add card details to your account and get automatically billed for what you use.

Herein lies the confusion. If you are one of the vast majority of users, who simply want to use a dynamic map with a single pin to define your office location alone, it is free. No change there. BUT!!! You still need to provide a valid credit/debit card on file in order for it to work. This is where you may have been caught out and why Google Maps is not working on your website.

Check you have the correct code

First things first, if you haven’t updated your website since 2018, you may want to check you have the correct code. The code needed to embed an interactive map or Street View panorama on your website has been distilled down into one simple HTTP request.

<iframe

  width="600"

  height="450"

  style="border:0"

  loading="lazy"

  allowfullscreen

  referrerpolicy="no-referrer-when-downgrade"

  src="https://www.google.com/maps/embed/v1/place?key=API_KEY

    &q=Space+Needle,Seattle+WA">

</iframe>

For the eagle-eyed among you, you will have noticed you need to be in possession of a valid API key to replace the text ‘API_KEY’. You also need to put in the location you want to show after the ‘q=, taking care to replace spaces with a ‘+’ sign like in the example above’!

What is an API key?

For those who don’t know, an API key or application programming interface, is a key code that is used to identify and authenticate an application or user. When it comes to using Google Maps, it is a personal code provided to you, by Google, to access and have a working Google Maps feature on your website. Your API key comes with a free quota of Google Map queries. If you happen to be one of the accounts hitting astronomical numbers and exceeding your quota, Google will automatically bill you for any additional usage on a pay as you go basis.

So how does one go about retrieving their Google Maps API key? Getting your API key is not complicated and only takes a few minutes. You will also need to create a billing account or assign to an existing one.

How to retrieve and use your API Key?

1. Visit Google Cloud Console.
2. Sign in to your google account or create a new one.
3. Click ‘CREATE PROJECT’ on the right hand side.
4. Enter Project Name, Organisation and Location.
5. Press ‘Create.’
6. A pop up window with your unique API key will appear. A copy of your API Key is kept in the Credentials section of your account should you need it again, so don’t worry about making a record of it. Ensure you have the first permission box ticked ‘Enable all Google Maps APIs for this project’. Opt into the second at your own discretion ‘Create budget alerts to help me stay on top of my spending and notify me when I am about to exceed the $200 monthly Google Maps credit.’
7. Click ‘Go to Google Maps Platform.’
8. Another pop up window entitled ‘Protect your API key’ will appear.
9. Select restriction type ‘HTTP referrers (websites) from the drop down menu as this is for website purposes. It is wise to set up restrictions as it prevents others using your API Key elsewhere and you being charged for it. They will have to retrieve their own API key.
10. In the type box where is says ‘Referrer*’ enter *.yourdomainname.com/* Basically this means you are covered to use Google Maps anywhere on your website.
11. Press ‘Restrict Key’.
12. Ensure you have a valid payment method attached to your account by clicking on the kebab menu (3 vertical dots) in the top right hand corner and checking under ‘Billing account management’ and ‘Payment method.’