Google recently introduced a new API key that is needed to display native map views using the Google Maps API. I have created a key as per the instructions here:

https://developers.google.com/maps/documentation/javascript/get-api-key

and I got a message that says that the key is valid and ready to use. However, when running my app on an Android device, it does not work. I use build 3440, which should be able to handle this according to the docs.

To test this, I created a test API key in the Google Cloud Platform. I then added that key to the Corona NativeDisplayObjects sample app in config.lua as in the docs. I built it and tested it on my Android device but it did not work either.

I have create a support ticket at Google but as far as I can see in the Google Cloud Platform, the key is fine. Could this be a bug on the Corona side?

Anyone else had this problem?

Just checked the device logs (see below) and there is a row that caught my attention:

E/Web Console(16533): Uncaught Error: The Google Maps JavaScript API does not support this browser.:109

Is the native Map view somehow using a browser "under the hood"? I don't know if this is relevant...

What device are you testing on that's generating this error?

Rob

A Samsung Galaxy S3.

I did some further research (i.e. googling) on this and it seems that this happens every now and then as Google phases out support for older browsers. A number of systems/platforms/frameworks appear to be affected by this and I'm guessing they all access the maps via some sort of "browser emulation"... (again, I'm just guessing)

Could this be the case here too? If so, does something need to be updated internally in Corona in order to make the native Map object work on Android again?

@Rob:

Just heard from Google support:

 

Right now, we don't have any issues with Google Maps JavaScript API, so it is unlikely that your map is not loading due to some issue on our side. If you are having error messages from the API itself, that means, there's something wrong with the setup.

 

When I checked your project in the cloud console, I can see that there are no issues with the setup and the API key should be ready to use.

 

However, I can also see here that even if you mentioned that you created the API key recently, the project XXX up to now, does not have any usage at all. There should be some, if you are testing your application, because the dashboard of cloud console is supposed to show the number of request, regardless if it's an error request or a success.

 

The possible issue here is that your API key is not being applied to the request even if you have already added it to the application that's why the request to the API is not being logged to your project. Or the application is getting an error and does not really reach the part where the map should be called, that's why there are no requests that are being logged.

Given the above (and the fact that the app works on iOS), this seems to me like a bug somewhere in Corona.

On iOS, we use Apple's map SDK. On Android, we use a Google JavaScript-based map inside of a webView. We do this instead of using the Google Map SDK so that maps will work on Kindle Fires (and at the time Nook devices). It's possible that the browser identifying information is showing that the webView is too old for Google Maps.

This may be relevant: https://developers.google.com/maps/faq#browsersupport

Android

• The current version of Chrome on Android 4.1+.
• Chrome WebView on Android 4.4+.

The minimum supported SDK is level 15 which is 4.03. Based on this, its likely maps would be unsupported on anything less that 4.4 which is API level 19.  You can try setting the minimum SDK level in your build.settings:

http://docs.coronalabs.com/guide/distribution/advancedSettings/index.html#minimum-sdk-version

and set it to 19 and see if that solves the issue.

Rob

I checked the software versions on the device:

Yes, Android 4.3 would be too old for Google Maps to work in a webView.

Ok, thanks!

After testing with a brand new device, it still does not work on Android (although workging perfectly on iOS). Google support wrote this:

 

It looks like you are having issues adding the API key to the JavaScript Map request, so it does not authenticate under your project. If you are not able to add an API key in your Map request, or you have an invalid character in your request (like a space or when URL encoded, it could be a plus sign (+), or any special character), or you accidentally added an extra character or deleted a portion of the key, you will have an error for invalid key. The error will result to a grey map with "Oops! ----" message.

 

To fix this, we would need to get the exact request that your application generated. Is there a way for you to log the full URL request that your application is sending?

I sent the key to Google support and they have confirmed that it is correct and I have re-checked in config.lua, which is also correct. This is what it looks like

license = {
        google = {
            key = "[my google iap key]",
            mapsKey = "[my google maps key]",
        }
    }

"key" is for Google IAP and "mapsKey" is for showing maps (as per the new requirement from Google). Google specifies the word "key" to add the maps key when making a request to the Google Maps API:

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>

Could it be that you are using the "key" string and not the "mapsKey" string when making the call?

This looks more and more like something on Corona's end. My key is valid and it is entered correctly at the correct place according to the docs. Does the Corona NativeDisplayObjects sample app work for you? If adding the Google IAP key too?

I'm moving this discussion to a new thread in the Android forum since it is no longer just a matter of the sample app but of the native map object on Android in general.