Dear all,
Lately I was asked if I could integrate Google API functionality into a Design Studio dashboard without doing SDK coding. Well, thanks to Google and our awesome SCN DesignStudio SDK community repository the answer is yes. All you need is the community component EmbeddedFrame and a google account. There is a whole bunch of available google API’s for different use cases but we are going to focus on the Embed API today.
The actual dashboarding request was to be able to get directions from place A to B using different kinds of data feeds like BEx queries, HANA Views and free text input.
How it works
Now let’s say you want to plan your next scenic bike trip along the great Rhine river from your hometown Cologne to Koblenz via the town Andernach.
Just put the city names in the provided boxes, choose your type of transport (in our case by bike) and hit “Get Directions”. The Google API also provides the option to put the desired unit system (metric or imperial) or intermediate waypoints on the way from your origin to your destination.
This is what you get:
As you can see the Embed API just answered our request perfectly. You might notice though that you don’t have the same flexibility in terms of playing with the parameters like you are used to with the actual maps. In order to get that you can click further options on the details panel on the top left of the pane which will redirect you to a new window loading google maps itself with your route.
Let’s try another one. How long does it take from Cologne to Muskegon, Michigan?
Wow, 14 hours? There are probably some domestic flights from Chicago which are not shown to us. It seems that there is some further testing necessary to evaluate what requests can do with the embed API and what requests might be better off if with the fully blown maps application.
How to integrate
In order to construct the URL to call the Google Embed API there are several options. I’d like to outline two:
- Use standard Design Studio components like the dropdown and input field to expose controls for the users to choose from available data or type their own.
- If your input comes from another application altogether and you want to call your design studio dashboard from another launchpad or Iframe you can use global Design Studio variables and make them URL parameters. That way you can pass the values from outside and use them as input for the Google Embed API call.
You can find the example dashboard (SCN_GOOGLE_EMBED_API-20160305125839.zip) implementing both scenarios on my GitHub page and on our SCN community applications repository:
GitHub - MartinPankraz/DesignStudioSDK-Components
GitHub - org-scn-design-studio-community/applications: Repository for Examples
Please note that you will have to put your google API key first at the relevant spots on the component coding and don’t forget to activate the Embed API first for your account. Otherwise you might see messages like:
The Google Maps API server rejected your request. This API project is not authorized to use this API. Please ensure that this API is activated in the APIs Console: Learn more: https://code.google.com/apis/console
An example call in local mode for the second option described above looks like this:
http://<server>:<port>/aad/zen?APPLICATION=SCN_GOOGLE_EMBED_API&designersessionid=1234&X_ORIGIN=Berlin&X_DESTINATION=Hamburg
Google Embed API
The Embed API comes with different modes which can be defined through the API call. The pattern looks like this:
https://www.google.com/maps/embed/v1/<mode>?key=<YOUR_API_KEY>&<parameters>
Where
- <mode> can be either place, directions, search, view, or streetview
- <YOUR_API_KEY> is your google API key and
- <parameters> describes optional additional parameters like the maps zoom level for example
Since you are using your personal API key it is also possible to have some kind of personalization when being logged in with your google account. According to google you can make use of saved places indicated by the URL parameter "q". The relevant section on the Google API documentation is called “Attributed Save”.
You can find the developer documentation here:
https://developers.google.com/maps/documentation/embed/guide
As of today there is a limitation on Embed API requests as follows:
- Requests per day max 2.000.000
- Requests per 100seconds per user unlimited
Daily contingents will be reset by midnight PT.
Final Words
My showcase proved how easy it is to bring some sophisticated geolocation functionality into your Design Studio dashboards without the need to do custom SDK coding by using Googles API’s. And this directions example is only one of the big amount of possibilities. The only downside is that some of the actual maps functionalities are limited for the embedded maps case.
Anyone willing to share his google API integration story is very welcome to do so.
Let me know your thoughts.
Yours
Martin
- SAP Managed Tags:
