Skip to Content

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:

HTML_viewer.jpg

 

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

/wp-content/uploads/2014/04/mapscript_432576.jpg

 

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:

/wp-content/uploads/2014/04/mapscript2_432577.jpg

 

The end result will look something like this:

IE03_with_map.jpg

 

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.

To report this post you need to login first.

19 Comments

You must be Logged on to comment or reply to a post.

  1. Bruno de Abreu Serrão

    Hi Tamas,

    Amazing contribution to increase the many utilities of UX by Personas. I have a doubt, to interact with this or any Google API the final user has to have necessarily a API Key? He must need to activate this services? Or it’s just focused for developers to implement it?

    Thanks and regards!

    Bruno.

    (0) 
    1. Tamas Hoznek Post author

      Hi Bruno,

      Thanks; hope this will be useful.

      As for the key, there is no need for the end user to worry about it. Since there is no usage limit for a browser API key, one is sufficient for any number of flavors. A key is attached to a Google (gmail) ID, so a developer can request one and use it as often as necessary.

      I’d probably request a separate API key for each customer when on a project and restrict its usage to that particular domain.

      Tamas.

      (0) 
  2. Pascual Sgro

    Hello Tamas,

    Indeed, very good tips coming from you. Thank you.

    I am running into an error when trying to replicate this scenario, that is, embedding a google map.

    I followed the steps to the line, got my API Key, etc.

    However, I get the following error in the HTML window:

    ” The Google Maps API server rejected your request. Invalid request. Invalid ‘q’ parameter “

    The address is formed as “street,city,state,us”, so I don’t quite undestand what could be wrong.

    If you could shed some light in this regard.

    BTW, it is important to add to your tip, that the https://www.google.com url must be listed in the whitelist table, otherwise an error is also shown.

    (0) 
    1. Tamas Hoznek Post author

      Is the URL you used in the HTML viewer exactly as described in the blog post, including the curly brackets for the query string specification?

      Also, what is the final formatted address string that gets passed on to the maps API? Post an example to see.

      As for the whitelist: you’re correct of course, but I thought whitelisting any external URL is pretty much a given 🙂

      (0) 
      1. Pascual Sgro

        Thank you for the quick reply. Here’s what I’m starting with:

        This is the text field tool where the final address is built. At the moment, I am manually typing it.

        Then, the HTML viewer:

        where the URL: https://www.google.com/maps/embed/v1/place?key=MyApiKey_here&q={1}


        and where the {1}= the text field tool ID.


        Finally, I have the script tool:


        Where I’m just refreshing the HTML viewer (command), pointing to the HTML viewer ID.

        Also, I’m working on IE 10, and connected thru my company’s VPN.

        (0) 
        1. Tamas Hoznek Post author

          Everything looks good there… I tried the same address in my prototype and it works just fine, although I get Hallandale Beach, FL 33009 shown on the Google Map.

          No idea why do you get an error message, sorry.

          (0) 
        2. Tamas Hoznek Post author

          Actually, I just noticed something… do you have a blank (space) right in front of your API key? I mean, between the = sign and the key. The screen shot you posted above makes it seem so.

          If yes, try to remove it.

          (0) 
          1. Pascual Sgro

            Thank you, Tamas. I hadn’t noticed it. It actually made the difference, meaning, it works now as expected. But it’s hard to tell from within the url entry filed since it gets hidden(truncated).

            Appreciate it. Thanks.

            (0) 
  3. javier rubio corral

    Hi Tamas,

    Thank you for posting this, really interesting.

    I have followed all your steps and asked for an API key, but when displaying the Google map I have the error message below. Should I contact to the administrator/basis colleague?

    Thank you,

    Javier.

    The Google Maps API server rejected your request. This IP, site or mobile application is not authorized to use this API key.

    (0) 
    1. Tamas Hoznek Post author

      Hi Javier,

      not sure why would Google reject an API key that’s set up properly… did you restrict the domain when you created the key?

      It’s unlikely your basis team would know what’s wrong with the request.

      Tamas.

      (0) 
      1. javier rubio corral

        Thank you Tamas,

        The problem was solved.Some services were not activated for my Google project.

        By the way, where can I find the user area’s OnCreateHandler event?

        Appreciate it,

        Javier

        (0) 
        1. Tamas Hoznek Post author

          It’s here:

          Capture.JPG

          Select the whole canvas by clicking right underneath the application toolbar.

          In the Properties window, you’ll have to enter the control ID of the script button you’d want to press when the screen loads.

          (0) 
            1. Tamas Hoznek Post author

              You selcted the correct control.

              If you scroll up in the property window, the OnCreateHandler will be listed among the USRAREA properties.

              (0) 
              1. javier rubio corral

                Thank you Tamas, sorry for bothering you again with the same but OnCreateHandler is missed in the properties list. Do I need to activate anything somewhere else?

                Regards,

                Javier

                Screen Personas.jpg

                (0) 
                1. Tamas Hoznek Post author

                  I don’t understand how is that possible… the OnCreateHandler should be always present for the user area. I have never seen it missing, not even in much older releases and pach levels than what’s current.

                  You may want to create an OSS incident for this.

                  (0) 

Leave a Reply