Google Maps API Common Errors & Solutions

1. For Development Purposes Only

Sometimes you see websites that have google maps embedded but they have a “For Development Purposes Only” watermark.

<script src="https://maps.googleapis.com/maps/api/js"></script>

Solution

To remove the “For Development Purposes Only” watermark from the map, you’ll need to add an API Key as a query parameter in the Maps JavaScript library URL.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

⚠️ Make sure to replace your API Key with [YOUR_API_KEY] in the URL
Google Maps API → Obtain An API Key

2. Google is not defined

Scenario #1: When you are trying to create a Google Maps Map Object without including the Maps Javascript library, you will get the “Google is not defined” error.

<script>
   var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
          lat: 45.4215296,
          lng: -75.6971931
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });
</script>

Solution

Include the Maps Javascript library before creating google maps map object.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

<script>
   var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
          lat: 45.4215296,
          lng: -75.6971931
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });
</script>

Scenario #2: Adding a callback parameter with a initMap() function to the Maps Javascript library URL will limit the usage of the JS library inside that function.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"></script>

<script>
function initMap() {
   var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
          lat: 45.4215296,
          lng: -75.6971931
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });
}
</script>

This should work fine.

But, when creating the Google Maps Map Object outside of the initMap() function, you’ll get a “Google is not defined” error like in the screenshot below.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"></script>

<script>
function initMap() {
}

var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
          lat: 45.4215296,
          lng: -75.6971931
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>

Solution

To avoid this error, you can simply get rid of the callback parameter from the Maps Javascript library URL.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

<script>
var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center: {
          lat: 45.4215296,
          lng: -75.6971931
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
});
</script>

And the map will work as before.

3. CORS Error

When you make an HTTP Request to the Google Maps API service from the Client, you’ll probably get the CORS error like below.

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      // Typical action to be performed when the document is ready:
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", "https://maps.googleapis.com/maps/api/directions/json?origin=45.4215297, -75.6971932&destination=45.4215296, -75.6971931&key=[YOUR_API_KEY]", true);
  xhttp.send();

Error

🛑  Access to XMLHttpRequest at 'https://maps.googleapis.com/maps/api/geocode/json?latlng=7.9411343,98.3942565&key=xxxxx from origin 'http://localhost:8080' has been blocked by CORS policy: Cross-origin requests are only supported for protocol schemes: HTTP, data, chrome, chrome-extension, https.

Solution

This is a client side error so appending the proxy server link to the Google Maps API URL will be one of the ways to fix the CORS errors.

✅ Append “https://cors-anywhere.herokuapp.com/“ to the URL.

xhttp.open("GET", "https://cors-anywhere.herokuapp.com/https://maps.googleapis.com/maps/api/directions/json?origin=45.4215297, -75.6971932&destination=45.4215296, -75.6971931&key=[YOUR_API_KEY]", true);

If you want to know more about CORS Error, check out the link below:
CORS Error & Solutions In a Nutshell

4. This API Project Is Not Authorized To Use This API

You’ll get this server error when you try to access one of the Google Maps Libraries (such as Places API ) without enabling it on the Google Cloud Console.

The API service will return a response JSON object in which you can find the error under the error_message property.

🛑 This API project is not authorized to use this API

Solution

✅ Enable Place API Library in the Google Cloud Console.

1. Go to the Google Cloud Console website.

2. Choose API & Services and Library from the sidebar.

3. Go to Maps Javascript API then Places API.

4. Click the Enable button.

5. Done!

5. You must enable billing on the Google Cloud Project

Even though the Google API service offers a limited FREE quota, you must enable billing.

Without billing, the requests won’t work.

You get the equivalent of S300 per month for FREE (at least at the time of this article). The price of each request is stated here: https://cloud.google.com/maps-platform/pricing/.

Solution

1. Go to the Google Cloud Console website.

2. Choose Billing from the sidebar.

3. Select Manage billing accounts.

4. Click the Add billing account button.

5. Choose Country and Check Terms of Service!

6. Finally, add your credit / debit card information to start the free trial.

7. Done!