Google Maps API key

This article will show you where to get your Google Maps API key and how to use it within your MapTiler Engine project. We'll also take a look at how to solve the most common troubles you may possibly run into.

What is this key for?

The Google Maps API key basically works as your credentials when working with Google Maps API.

It is a unique identifier that authenticates requests associated with your project for usage and billing purposes. It is used to secure Google Maps products from unauthorized use. 

It comes in form of an alphanumeric string associating your account with your project and a specific API or SDK. Any API calls without providing a proper key are considered unauthorized and restricted.

Getting your key

To work with Google Maps JavaScript API, you need a project with a billing account. You can read how to set it up in the Google guide. You must have at least one API key associated with your project. Once you have your project set up, you can create your API key by following these steps.

Using Google Maps with API key in MapTiler Engine

One of the possibilities of presenting your data rendered in MapTiler Engine is using Google Map as the basemap for your output. When you use "Folder with tiles" for the output, the preview is generated for you automatically.

1. Make sure your API key is saved in the application settings

On the General tab of the Global Settings dialog (File->Settings), paste your key in the Google Maps API key field and click save.

2. Render your project using the "Folder with tiles" option for the output format

3. Opening a preview

In the output folder, you can see files index.html and googlemaps.html (except for others). By opening the index.html in your browser and navigating to Google Maps API -> Preview, you'll see your rendering output placed over the Google map. You'll see the same preview by opening the googlemaps.html in your're browser.

Solving errors

1. "This page can't load Google Maps correctly."

It may happen that instead of getting the preview you get this message box. In this case, you most likely haven't saved your Google Maps API key correctly in the settings and it's probably still empty.

2. “Oops! Something went wrong…”

This is another common error when you're not able to see the preview in the index.html file. The reason probably is, that the API key you entered is wrong. In this case, you can either check your key once again or try to remove the key from the settings (saving it with an empty field). 

If the troubles continue, you still can get more information about what's going on in the background using the browser's console or eventually contact the support team.

Useful links

Folder vs. MBTiles vs. GeoPackage
How to get your Google Maps API key