The AppGini Blog
A few tips and tricks to make your coding life a tiny bit better.

How to Test Your Google Maps API Key (and Troubleshoot Map Issues in AppGini and Beyond)

If you’re working with Google Maps integrations—whether in an AppGini app or any custom web project—you might occasionally encounter issues where maps don’t display as expected. One of the most common culprits is a misconfigured or invalid Google Maps API key.

To save you time and guesswork, we’ve created a simple, all-purpose Google Maps API Key Tester web page. This page lets you quickly check if your API key is valid and has the right permissions for the Maps Embed API and Maps Static API. It’s a handy troubleshooting tool for any developer or admin working with Google Maps.

Screenshot showing the Google Maps API Key Tester page with two map panels


Why Do API Keys Fail?

Google Maps API keys can fail for several reasons, including:

  • Invalid key: The key was entered incorrectly.
  • API not enabled: The required API (Embed or Static) isn’t enabled for your key.
  • Restrictions: The key is restricted by IP, HTTP referrers, or usage limits.
  • Billing issues: Billing is not enabled on your Google Cloud project.

In all of these cases, your map fields in AppGini or other apps may show blank, errors, or “for development purposes only” watermarks.


How the Google Maps API Key Tester Works

Our test page is a simple HTML file you can run in any browser. Here’s what it does:

  • Accepts your API key in a text box.
  • Displays a Google Map using the Maps Embed API (via an <iframe>).
  • Displays a static map image using the Maps Static API (via an <img> tag).
  • If your API key is working, you’ll see a map of New York City in both panels. If not, you’ll see an error or blank area, helping you quickly pinpoint API issues.

The video recording below shows the tester when using a valid API key:

And this video recording shows the tester when using an invalid API key:


Using the Tester in an AppGini Project

If you’re troubleshooting Google map fields in an AppGini app, here’s a quick workflow:

  1. Download the Tester:
    Download Google Maps API Key Tester (zip)

  2. Upload to AppGini app:
    Extract the HTML file and place it inside your app’s hooks folder. For example:

    hooks/maps-api-key-tester.html
    
  3. Open in Browser:
    Visit the tester page in your browser, e.g.

    http://your-app-url/hooks/maps-api-key-tester.html
    
  4. Test Your Key:
    Enter the same API key your AppGini app is using.

    • If both maps display correctly, your key is fine.
    • If not, check the error messages or blank areas for clues.

This helps you determine if the problem is with your API key itself or with your app’s integration.


Using the Tester for Any Web App

You don’t need to be an AppGini user to benefit from this tester!

  • Place the HTML file anywhere on your server or run it locally.
  • Use it whenever you need to troubleshoot Google Maps API issues in any web project.

What to Do If Your API Key Fails

If the tester shows errors or blank maps:

  • Double-check your API key for typos.
  • Check Google Cloud Console:
    • Make sure both the Maps Embed API and Maps Static API are enabled.
    • Review and adjust key restrictions as needed.
    • Ensure billing is enabled.
  • Consult error messages:
    Messages like “API key not valid” or “API not enabled” provide direct clues.

Download the Tester

Ready to try it?
Download the Google Maps API Key Tester (zip)


Troubleshooting Google Maps just got easier! Whether you’re an AppGini user or working on any web app, this tester page is your quick way to identify and fix API key issues—so you can focus on building, not debugging.