How to embed Google Maps into a Personas 1.0 / 2.0 flavor?

A potentially good use case for external Web content in a Personas flavor is when an address should be shown on an embedded map. For instance, the location of a customer or vendor can appear on the map together with other data belonging to the master record. The following steps will explain how to do this.

Let’s assume a scenario where you have the address details of an equipment on the screen and you want to show the corresponding Google Map in transaction IE03.

In order to include Google Maps in your flavor, you have to use the embed API provided by Google. Follow this link and obtain an API key from Google. This is necessary to make calls to the API.

Create a text box in your flavor which will be used for the complete address string, prepared for Google Maps use. This field should later be hidden of course.

Also add a script button – this will construct the address from the screen fields and invoke the Google Maps API.

Define an HTML viewer in your flavor with the following URL:

https://www.google.com/maps/embed/v1/place?key=your_API_key&q={1}

{1} will point to the address text box field you just created. The result should look like this:

Then in your script, copy the fields containing the address info into variables:

Next step is to concatenate the address fields so you end up with the complete address in one string. This is what will be interpreted by the map API.

This example is for a US address and is pretty straightforward. For other countries, if the country name is not already available in a screen field, you may have to use some additional logic or call a WebRFC in the backend to convert the country ISO code to the name or whatever else is necessary to prepare the address so that Google Maps will understand it.
Simply use a JavaScript step to build the address and format it according to the requirements of Google Maps. This means to replace all spaces with a ‘+’ sign and use a comma to separate the address components.
This is the JS step:
args.address = args.street.concat(“,”, args.city, “,”, args.state, “,”, args.zip);

args.address = args.address.replace(/ /g,’+’);
Paste this address string into the textbox you added and refresh the HTML viewer for the map:

The end result will look something like this:

The last step could be attaching the ‘Update map’ script button to the user area’s OnCreateHandler event, so that when the user displays the master record, the map will be automatically refreshed from the address associated with it.

You may want to hide the map update script button as well.