Google Maps Error :This page didn't load Google Maps correctly. See the JavaScript console for technical details

Question

I am developing a android application using cordova and I am facing a issue regarding google maps javascript api.

We have a purchased API and included it in the following format ..

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&client=<?php echo MAP_CLIENT; ?>&signature=<?php echo MAP_SIGNATURE; ?>"></script>

Using this particular script works absolutely fine in the web browser but is showing a error as follows.

Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details

Answer 1

As you are using the Premium plan with a client parameter you should authorize the URL you are loading an API from in your Google cloud support portal.

To prevent a third party from using your client ID on their own website, the use of your client ID is restricted to a list of URLs that you specifically authorize.

To see the URLs you have already authorized or to authorize additional URLs:

• Log in to the Google Cloud Support Portal.
• In the left-hand menu, click Maps: Manage Client ID.

You can add up to 100 URLs at a time. A Client ID may be associated with up to 3000 authorized URLs. If you expect your application to host Google Maps content from more than 3000 locations, you should switch to using API keys instead.

source: https://developers.google.com/maps/documentation/javascript/get-api-key#registering-authorized-urls

In order to figure out what is the URL that you should authorize, check the value of the window.location.href in you hybrid app. This value should be added to the list of authorized URLs.

Also note that Maps JavaScript API doesn't have signature parameter. You must delete it, especially if you expose there your cryptographic key which must be private.

I hope this helps!