Skip to Content

Hello all,

In this blog, I want to show how Google Maps can be displayed in the ABAP screens using the existing CFW utilities available.

There are many other blogs on SDN that talk about displaying Google Maps, but using BSP, WebDynpro, Netweaver. There’s actually none (at least I couldn’t fine any) that talks about how to integrate these maps in ABAP applications – using ABAP Controls.

If you wonder, why would one require a map display in ABAP Control when it’s already possible in Web Dynpro screens?
Well I would say – Why not? Imagine a R/3 report that shows you the list of resources and their tasks planned for today. It would be nice and informative for the user if he could additionally see the actual location of a person on the map. How nice it would be if the map can be displayed in the same screen or an pop-up instead of launching a new web dynpro or BSP application additionally.

Well that’s about the requirement, and here is the solution.

We will make use of HTML Viewer control. This is another control just like ALV Grid control or tree control that we use very commonly. This control is capable of displaying HTML pages in SAP screens. There’s more to that.. this HTML control is actually as smart as other browsers and it has the capability to run embedded Javascript… Wow.. isn’t that cool!

So here’s the trick – We will make use of Google APIs (nothing but a set of javascript functions) that can display the map. You can add markers and have text in them as tool tips. You can highlight a route between 2 points on the map and many more things.

Step 1: The first step would be to understand the HTML control. The class for that is CL_GUI_HTML_VIEWER. Some important methods of this class that we would be using are : CONSTRUCTOR, SHOW_URL, LOAD_DATA, DO_REFRESH.

You can additionally refer to the sample demo program SAPHTML_DEMO1.

Some more tutorials and example codes to understand the concepts of SAP Control Frameworks are here: Tutorials and Examples.

Step 2: Google APIs. Before we start on this, it would be helpful to read the documentation on these links:

Let’s take the simplest example and then you can explore more.. Check out the sample map here : Sample Map
Right click on the browser window and display the page source.. It will look something like this:

*************************************************************<br /><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”<br />    “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”><br /><html xmlns=”http://www.w3.org/1999/xhtml” xmlns:v=”urn:schemas-microsoft-com:vml”><br />  <head><br />    <meta http-equiv=”content-type” content=”text/html; charset=utf-8″/><br />    <title>Google Maps JavaScript API Example: Simple Map</title><br />    <script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-<br />i1QfUnH94QxWIa6N4U6MouMmBA”<br />            type=”text/javascript”></script><br />    <script type=”text/javascript”><br /><br />    function initialize() {<br />      if (GBrowserIsCompatible()) {<br />        var map = new GMap2(document.getElementById(“map_canvas”));<br />        map.setCenter(new GLatLng(37.4419, -122.1419), 13);<br />      }<br />    }<br /><br />    </script><br />  </head><br /><br />  <body onload=”initialize()” onunload=”GUnload()”><br />    <div id=”map_canvas” style=”width: 500px; height: 300px”></div><br />  </body><br /></html><br />*************************************************************</p><p>Here you can see how the map is initialized using the Latitude and Longitude information. Now, all we need to do is pass this piece of HTML code to the HTML Viewer control and it would display the map. <br />You can edit the HTML code in an ABAP program, and insert your own Geo coordinates for a location. So if you know the Geo-coordinates of a location, just insert them using variable and your job is almost done.</p><p>In this blog, I am not covering on how to Geo-code the data. I assume that the geographical coordinates are available and here we are discussing on how to display the map. </p><p><u>Step 3</u>: The method LOAD_DATA is capable of showing the output from an internal table. However, for some weird reason it didn’t work for me ! So here is the work around…<br />Use GUI_DOWNLOAD and create a temporary file in any of your temporary folders. Then use the method SHOW_URL to show the web page from the local file.</p><p>Lost completely !! So here is the code sample ..  </p>1.* Transaction SE38 – Create a program ZTEST_GOOGLE_MAP_DISPLAY.
2. Create a screen in this program with number 9000.
3. In this screen create a custom control and name it MAP_AREA.
4. In the PBO section, create the objects for custom container and HTML Control.

**    Global Variables.
DATA : lref_container TYPE REF TO cl_gui_custom_container,
       lref_html      TYPE REF TO cl_gui_html_viewer.

**    Creating containers. 

IF lref_container IS INITIAL.
**  Create a container and then the AlV control.
    CREATE OBJECT lref_container
      EXPORTING
        container_name           = ‘MAP_AREA’
      EXCEPTIONS
        OTHERS                      = 6.
**  Now create HTML Viewer
    CREATE OBJECT lref_html
      EXPORTING
        parent             = lref_container
      EXCEPTIONS
        OTHERS             = 5.
  ENDIF.

5.  Prepare the Internal table with the HTML Code.

  DATA : ls_string      TYPE char256,
            lt_data    TYPE TABLE OF char256.

**    Populate the Internal table.
  ls_string = ”.
  INSERT ls_string INTO TABLE lt_data.

  ls_string = ”.
  INSERT ls_string INTO TABLE lt_data.

……. ** Do it for all the lines in the code
……. ** Here Make sure you populate your Geo codes here..

  ls_string = ”.
  INSERT ls_string INTO TABLE lt_data.

  ls_string = ”.
  INSERT ls_string INTO TABLE lt_data.
****************<br />At the end of this, the contents of LT_DATA in debugging should look exactly like an HTML file. It should look as If you wrote the HTML code in a notepad and uploaded the contents of the file into the internal table.<p>***************</p><p>6.*  Download the contents into a temporary file..

**  Here I am using the Front end services to get the SAP Working Directory.
**  Because I want to create the file in this directory..
**  You can hard code it to any directory you want!

  CALL METHOD cl_gui_frontend_services=>get_sapgui_workdir
    CHANGING
      sapworkdir = lv_dir
    EXCEPTIONS
      OTHERS     = 5.

  CALL METHOD cl_gui_frontend_services=>get_file_separator
    CHANGING
      file_separator = lv_sep
    EXCEPTIONS
      OTHERS         = 4.

**    Setting the file name.
  CONCATENATE : lv_dir ‘google_map.html’ INTO lv_dir SEPARATED BY lv_sep.

**    Download the contents of LT_TABLE into this file.
  CALL FUNCTION ‘GUI_DOWNLOAD’
    EXPORTING
      filename = lv_dir
    TABLES
      data_tab = lt_table
    EXCEPTIONS
      OTHERS   = 22.
  IF sy-subrc <> 0.
  ENDIF.

**  Store the File location – This will be used as URL.
  gv_url = lv_dir.

7.  Show the HTML.

  CALL METHOD gref_html->show_url
    EXPORTING
      url                    = gv_url
    EXCEPTIONS
      OTHERS                 = 5.

**  A Forced Refresh, of you want !
  CALL METHOD gref_html->do_refresh.

8. Finally .. calling the screen. In the start of selection of your report call the screen.
  CALL SCREEN 9000.

The output of a similar program shown here:

!http://www.abaplearning.com/images/my_Images/google_map_in_sap_screen.jpg|height=1034|alt=Google Map in SAP Screen|width=1122|src=http://www.abaplearning.com/images/my_Images/google_map_in_sap_screen.jpg!

In my further Blogs, I would give more examples to display markers, some code examples.

Stay tuned… 🙂 </p>

To report this post you need to login first.

9 Comments

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

  1. Rich Heilman
    Actually there is no need to download the file to your PC, you can directly show the HTML in the control.

    * Load the HTML
    CALL METHOD lo_html->load_data
    IMPORTING
    assigned_url = lv_url “<<- Get URL
    CHANGING
    data_table = lt_html “<<- Pass HTML
    EXCEPTIONS
    dp_invalid_parameter = 1
    dp_error_general = 2
    cntl_error = 3
    OTHERS = 4.

    * Show it
    lo_html->show_url( lv_url ). <<– Pass URL

    Regards,
    Rich Heilman

    (0) 
    1. Varun Verma Post author
      Hi,
      Ya I know .. I have mentioned this in step 3.
      The thing is that for me it didn’t work !! So I had to use the work around ..

      But thanks for letting me know that it works.. for someone at least 😉

      (0) 
      1. Eva Trockel

        A couple of years later…

        I found your blog and tried it out. I made some changes and it’s now working very well. 🙂

        Here is my code:

        REPORT  z_google_map_display_simple.

        DATAlv_url        TYPE c LENGTH 255.

        DATAlr_html        TYPE REF TO cl_gui_html_viewer.

        DATAlv_string      TYPE string,

                lt_data        TYPE w3htmltab.

        * this is necessary, otherwise there is nothing displayed

        PARAMETERS: p_dummy TYPE xfeld.

        AT SELECTION-SCREEN OUTPUT.

        **  Now create HTML Viewer

           CREATE OBJECT lr_html

             EXPORTING

               parent = cl_gui_container=>screen0 “standard SAP container

             EXCEPTIONS

               others = 5.

        *  build HTML / script table

           lv_string = ‘<html>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<head>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<title>Simple Map</title>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<meta charset=”utf-8″>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<script src=”https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false“></script>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘<script>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘var map;’.

           APPEND lv_string TO lt_data.

           lv_string = ‘function initialize() {var mapOptions = {zoom: 8,center: new google.maps.LatLng(-34.397, 150.644)};map = new google.maps.Map(document.getElementById(‘‘map-canvas’‘),mapOptions);}’.

           APPEND lv_string TO lt_data.

           lv_string = ‘google.maps.event.addDomListener(window, ‘‘load’‘, initialize);’.

           APPEND lv_string TO lt_data.

           lv_string = ‘</script>’.

           APPEND lv_string TO lt_data.

           lv_string = ‘</head><body><div id=”map-canvas”></div></body></html>’.

           APPEND lv_string TO lt_data.

           lr_html->load_data(

        *    EXPORTING

        *      url                  = gv_url    ” URL

        *      type                 = ‘text’    ” Typ von  MIME object

        *      subtype              = ‘html’    ” Subtype von MIME object

        *      size                 = 0    ” Läange der Daten data

        *      encoding             = encoding    ” Encoding für MIME object

        *      charset              = charset    ” Encoding für MIME object

        *      language             = language

             IMPORTING

               assigned_url         = lv_url    ” URL

             CHANGING

               data_table           = lt_data    ” data table

             EXCEPTIONS

               dp_invalid_parameter = 1

               dp_error_general     = 2

               cntl_error           = 3 ).

           IF sysubrc <> 0.

        *   MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno

        *              WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.

           ENDIF.

           CALL METHOD lr_html->show_url

             EXPORTING

               url                    = lv_url

             EXCEPTIONS

               cntl_error             = 1

               cnht_error_not_allowed = 2

               cnht_error_parameter   = 3

               dp_error_general       = 4

               OTHERS                 = 5.

        **  A Forced Refresh, of you want !

           lr_html->do_refresh( ).

        (0) 
  2. Franis Pignon
    Hello

    I am working on integrating Google Maps into ABAP programs and I used about the same solution as you.

    But when I launch it, I always get an error message from Google: “This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/.”

    I generated different keys but I can’t get the “right” one. I tried with http://mycompany.com, http://mycompany.com:8000, http://localhost, http://htmlviewer.sap.com

    Which server did you register for getting your key?

    Thanks in advance for your reply!

    PS: why did I registered htmlviewer.sap.com? Because according to Google, in order to know the server needed to be registered, the code alert(window.location.host) can be inserted to display the host name. That’s what I did and htmlviewer.sap.com was the result.

    (0) 

Leave a Reply