Our Blog.

News, views, tips & more.

21 Jan

Google Maps now requires an API

Is your map not displaying correctly on your website? This is because Google Maps now requires an API key to display the maps. Google Maps also requires it's users to set up a billing account. Please note that Google gives you a very large amount of free credits every month - this virtually makes Google Maps free. It is extremely unlikely that you will exceed the free credit limit. As a precautionary measure, you can set limits and alerts to warn you if you are reaching your free credit limit.

Google Maps has not made this process as straight-forward as you would hope though. This guide will take you through each step required to create an API for your website.

How to create a new Google Maps API

1. Firstly, login to your Google Account. You may need to create a Google account if you have not already.

2. Search for Google Map Platform - then click ‘Get Started’.

3. Choose ‘Maps’ - then click ‘Continue’.

Enable-Google-Maps

4. Choose ‘Create a new project’, enter a name and then click ‘Next’.

Select-Projects

5. Set up billing for your new project - you can then proceed to setting up your APIs (Please note that Google Maps give you a very large amount of free credits every month. We have never known any one to exceed this limit of free credits. You can set up alerts and limits for safe measure.).

6. Locate ‘APIs & Services’ from the left hand menu.

Select-APIs-Services

7. Now click ‘Enable APIs and Services’ which is located at the top of the page.

8. Click ‘Maps Javascript API’ from the options here.

Select-Maps-Javascript-API

9. Then click ‘Enable’.

10. Maps Javascript API will now be set up and ready for using.

11. The final step is to retrieve the API key, click the Navigation Menu icon which is located top left.

12. Click ‘APIs & Services’ - then click ‘Credentials’.

13. Before copying the API key, we need to set up some restrictions to protect your API Key.

14. In the 'API Keys' list click 'API Key'.

14a. Under 'Application Restrictions' - check HTTP Referrers (web sites). Then enter in your full website address including 'https://www'.

14b. Under 'API Restrictions' - select 'Maps Javascript API' from the dropdown list.

Restrictions

15. Then click 'Save'.

16. Now we can copy the API key, in the ‘API Keys’ list you will see your API key - it will look like a long list of letters and numbers.

17. Copy this by clicking the Copy Icon.

API-Key

18. Email this over to your website administrator (Dolia, if you are our client!) and they will be able to add this into your website for you.

Once the API key has been added to the site, it can take up to an hour for the maps to then start displaying correctly.

Joe

Email This email address is being protected from spambots. You need JavaScript enabled to view it.

Any Questions? Have a chat with us.

CONTACT

Dolia Design Ltd,
The Old Coach House,
The Avenue,
Farleigh Wallop,
Basingstoke RG25 2HT

01256 536 080

[email protected]

CONNECT WITH US

Keep up to date with our latest projects