How to create an API key for the Map Widget
The Map widget is supported on MacOS, iOS, Android, and Web (as of LiveCode 10.0.0 DP-3).
For Android and Web standalones, the Map widget requires an API key. You can specify this key in the Inclusions pane, in the Map widget row, by clicking on the cog icon:
In this lesson, we will see how to generate these API keys.
First, visit the Google Developers Console, at https://console.developers.google.com, and login with your Google account. Then click on the arrow to select a project:
Click NEW PROJECT:
Give the new project a Name:
and press the Create button. The new project os now created
Next, click on the Menu icon at the top left, and choose APIs and Services -> Credentials:
You should see something like this. Click on CREATE CREDENTIALS:
Choose API key:
An API key is now created:
This API key is now unrestricted. You can use this API key for both Android apps and Web apps. However, we suggest you restrict this API key to Android apps, and create a separate one and restrict it to Web apps:
Then, follow the same steps to create a new API key, and restrict it to Web apps:
You have now created two different API keys, one for Android apps and one for Web apps:
You can now enter these API keys in the Inclusions pane, in the Map widget inclusion row, in the dialog that appears after clicking on the cog icon:
Now, you can successfully deploy your app that uses a Map widget on Android and Web.
JereMiami
May I ask what SDK Platform/SDK Tools you are using in Android Studio?
I have API 33 and 31.0.0/30.0.3/JDK 1.8.0_341 and I cannot get this to deploy on LC 10 (but it does deploy om 9.6.11, just the Map Widget is blank). It's actually the Map Widget why I need to upgrade to LC 10, so this would be very helpful if we can get a lesson on deploying LC 10. Can't get it to work on Windows or Mac.
sam norris
Hello,
With regards to the Android Studio questions, please post any comments to the "LiveCode Android Studio Setup Checklist" lesson.
With regards to using the Map widget in 9.6.11: If you are seeing a grey square with just the "Google" logo, please try again with a fresh API key. If you are not even seeing that, you need to turn on manual inclusions and add the Map widget manually.
JereMiami
For the map widget, on both LC 9.6.11 and LC 10 DP-8, the map widget works as expected in the macOs IDE, but when deployed to android physical devices, the map is blank (though it does show the Google logo in the lower left corner and the recenter icon in the upper right). Blendlevel is set to 0, so its not that, and visible is set to true.
I also confirmed that the API Keys generated from the console are working and receiving the requests without any error.
Any idea why the map is not showing (minus the logo and recenter icon)?
sam norris
Hello,
We discovered a similar issue very recently with an API key of our own. The stack would work with a different key and the original key would never work. Can you reproduce the problem if:
1. You use the same stack with a fresh API key (be sure to uninstall the app from your device before redeploying)
2. You create a fresh stack but use the old API key?
Also, what restrictions if any were set for that key?
JereMiami
Hi Sam,
I removed the old API Keys from the standalone settings (both for android and web). I generated new keys. In "Set Applications Settings," one API Key is ticked "Android apps" and the other "Websites." Those API keys are placed into the appropriate fields in the in the Map standalone applications settings Inclusions pane.
That did not resolve the issue.
However, I did notice that when I go back in to "Edit API Keys" for each key, "None" is ticked under "Set an API restriction." For you, shouldn't that be already ticked "Android Apps" and "Websites" respectively for each key? If so, then it appears my selections are not saving under "Set an API restriction." I waited the five minutes before clicking on "Edit API Key" to check and it still defaults to "None" for both keys. Have you had issues with that? Or is that normal "None" defaulted when previously saved as "Android apps" or "Websites?"
JereMiami
One more thing to add, which might resolve the issue here. When I tick "Websites" in "Set an API restriction," and then add a URL to "Website restrictions," the "Website" tick under "Set an API restriction" is now saved and the default selection when I go back to "Edit API Keys." On the other hand, if no URL is entered under "Website restrictions," the selection under "Set an API restriction" is not saved and defaults to "None." There is also a green checkmark, instead of a caution icon, next to the name of the key indicating that the key is restricted.
If I tick "Android apps" what do I put into the "Package Name" and "SHA-1 certificate fingerprint" fields, as this appears to be necessary to save the settings under "Set and API restriction?"
Many thanks in advance!
sam norris
Hello,
After investigation, I suspect the problem is that Maps SDK for Google is no longer free. Under "Enabled APIs and services", click on "+ ENABLE APIS AND SERVICES" then "Maps SDK for Google". This will ask for credit card details; I have not personally continued past that stage and can't advise further.
As for the fingerprint question, the following command ought to output the fingerprint among other things.
Windows: keytool.exe -list -keystore [path to keystore] -alias [name of alias]
Mac/Linux: keytool -list -keystore [path to keystore] -alias [name of alias]
sam norris
In addition to the above, ensure that the package name given in the Android restrictions matches the one you have given the stack in the standalone application settings.
JereMiami
Hi Sam,
I actually went through that credit card process and "Maps SDK for Android" is already enabled. When you click into that screen you will see a green check next to "API Enabled."
The service is still free and only charges the credit card if you rise above $200 in credit usage.
I am going to attempt to enter the package name and the SHA-1 Certificate Fingerprint. I believe you have to enter this information in order for "Android apps" key restriction to save. Otherwise, it reverts back to "None." The same goes for the "Websites" key restriction. If not URL is entered, then the key restriction will revert back to "None."
I'll let you know the results.
Thanks!